JavaScript: obtenir la valeur de la liste déroulante

Question

J'ai 3 zones de liste déroulante/liste déroulante HTML. Tous ont un nom et un identifiant distincts. Lors d'un événement particulier, je veux connaître la valeur de chacun d'entre eux. Quelqu'un peut-il me donner un extrait de code pour cela?

Answer 1

utilisant jQuery:

$("#dropdownID").val(); 

Answer 2

Utilisez un cadre comme jQuery mentionné ci-dessus ou tout simplement le faire à l'ancienne école. document.getElementById('dropdownId').value.

Answer 3

Pour ce faire, ne pas utiliser jQuery:

function getSelectValues() { 
    var values = []; 
    for (var i = 0; i < arguments.length; i++) { 
     var select = document.getElementById(arguments[i]); 
     if (select) { 
      values[i] = select.options[select.selectedIndex].value; 
     } else { 
      values[i] = null; 
     } 
    } 
    return values; 
} 

Cette fonction retourne un tableau de valeurs qui correspondent à la id passer de vous dans la fonction, comme suit:

var selectValues = getSelectValues('id1', 'id2', 'id3'); 

Si un <select> avec l'un de vos id s n'existe pas, le tableau contient null pour la valeur de cette position.

Il y a deux autres façons de le faire, vous pouvez passer la fonction d'un tableau de id valeurs: getSelectValues([ 'id1', 'id2', 'id3' ]), auquel cas la fonction serait changé:

function getSelectValues(ids) { 
    var values = []; 
    for (var i = 0; i < ids.length; i++) { 
    // ... 

Vous pouvez également passer la fonction une carte de id s et remplir les valeurs suivantes:

var myMap = { 'id1': null, 'id2': null, 'id3': null }; 
getSelectValues(myMap); 
// myMap['id1'] contains the value for id1, etc 

Cela changerait la fonction d'être:

function getSelectValues(map) { 
    for (var id in map) { 
     var select = document.getElementById(id); 
     if (select) { 
      map[id] = select.options[select.selectedIndex].value; 
     } else { 
      map[id] = null; 
     } 
    } 
} 

Answer 4

Je vais essayer de les mettre en place les unes à côté des autres dans votre code HTML, puis de les parcourir à l'aide de la méthode each() intégrée de jQuery. Vous souhaitez configurer vos éléments comme celui-ci:

<div id="dropdownBoxes"> 
<select id="firstElement"> 
    <option>cool</option> 
    <option>neat</option> 
</select> 
<select id="secondElement"> 
    <option>fun</option> 
    <option>awesome</option> 
</select> 
<select id="thirdElement"> 
    <option>great</option> 
    <option>synonym</option> 
</select> 
</div> 

<input type="button" id="theTrigger">Push me!</input> 

Ensuite, dans votre script:

var dropdownValues; 

$("#theTrigger").click(function(){  
dropdownValues.length=0; 
$("#dropdownBoxes select").each(function(){ 
    dropdownValues.push($(this).val()); 
    }); 
});