Comment obtenir la valeur d'un menu déroulant de sélection en JavaScript?

Question

Comment puis-je alerter la valeur sélectionnée par l'utilisateur à partir d'une liste déroulante de sélection en Javascript. Dans cet exemple, je veux stocker la valeur dans une variable et l'alerter à l'utilisateur.

<script type="text/javascript"> 

function processmyform() { 

    var chosenAnimal = // what goes here 

    alert(chosenAnimal); 

} 
</script> 

<form action=""> 
    <select name="animal" class="favAnimal"> 
     <option value="dog">Dog</option> 
     <option value="cat">Cat</option> 
     <option value="bird">Bird</option> 
    </select> 
    <a href="#" onclick="processmyform()" /> 
</form> 

Answer 1

Tout d'abord, il serait plus facile si votre boîte de sélection avait une carte d'identité. Ensuite, vous pouvez utiliser getElementById.

var animalSelectBox = document.getElementById('animal'); 
alert(animalSelectBox.options[animalSelectBox.selectedIndex].value); 

Au lieu de cela, voici comment le faire en utilisant getElementsByName (notez celui-ci est au pluriel).

var arr = document.getElementsByName('animal'); //will be an array 
alert(arr[0].options[arr[0].selectedIndex].value); 

Answer 2

Je généralement mis un id sur la sélection, comme id="animal"

Ensuite, vous pouvez faire:

var animal = document.getElementById("animal"); 
var animalValue = animal.options[animal.selectedIndex].value; 
alert(animalValue); 

Answer 3

Je fixerait un id sur votre select-tag:

<select id="animal" name="animal" class="favAnimal"> 

Javascript:

var chosenAnimal = document.getElementById("animal").value; 
alert(chosenAnimal); 

Answer 4

Utilisez selectedIndex

<form id="yourForm" action="#"> 
    <select id="animal" name="animal" class="favAnimal"> 
     <option value="dog">Dog</option> 
     <option value="cat">Cat</option> 
     <option value="bird">Bird</option> 
    </select> 
    <input type="submit" value="Submit" /> 
</form> 

window.onload = function(){ 
    var selectElement = document.getElementById('animal'); 

    document.getElementById('yourForm').onsubmit = function(){ 
     var index = selectElement.selectedIndex; 
     alert(selectElement.options[index].value); 
     alert(selectElement.options[index].text); 
     alert(index); 
     return false; 
    }; 
};