jquery obtenir l'option sélectionnée dans la liste déroulante

Question

Habituellement j'utilise $("#id").val() pour retourner la valeur de l'option sélectionnée, mais cette fois cela ne fonctionne pas.

La balise sélectionnée a l'ID aioConceptName

Code HTML

 <label>Name</label>
    <input type="text" name="name" />
    <select id="aioConceptName">
        <option>choose io</option>
        <option>roma</option>
        <option>totti</option>
    </select>
</label>
 

Answer 1

Pour les options de liste déroulante, vous voulez probablement quelque chose comme ceci:

 var conceptName = $('#aioConceptName').find(":selected").text();
 

La raison val() ne fait pas l'affaire parce que cliquer sur une option ne change pas la valeur de la liste déroulante - elle ajoute simplement la propriété :selected à l'option sélectionnée qui est un enfant de la liste déroulante.

Answer 2

Définissez les valeurs pour chacun des <option> s

La raison pour laquelle .val() n'a pas fonctionné est que .val() renvoie l 'attribut value . Pour que cela fonctionne correctement, les attributs value doivent être définis sur chaque <option>

 <select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>
 

Faire cela vous permet de faire $('#aioConceptName').val() au lieu de tout ce :selected vaudou étant suggéré par d'autres.

Answer 3

J'ai trébuché sur cette question et j'ai développé une version plus concise de la réponse d'Elliot BOnneville:

 var conceptName = $('#aioConceptName :selected').text();
 

ou génériquement:

 $('#id :pseudoclass')
 

Cela vous évite un appel jQuery supplémentaire, sélectionne tout en un coup, et est plus clair (mon opinion).

Answer 4

Essayez ceci pour la valeur ...

 $("select#id_of_select_element option").filter(":selected").val();
 

ou ceci pour le texte ...

 $("select#id_of_select_element option").filter(":selected").text();
 

Answer 5

Avez-vous envisagé d'utiliser un javascript ancien?

 var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;
 

Voir aussi Obtenir une option texte / valeur avec javascript