Question jQuery Obtenir l'option sélectionnée à partir de la liste déroulante


Habituellement j'utilise $("#id").val() pour renvoyer 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>

878
2018-05-18 20:11


origine


Réponses:


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 est parce que cliquer sur une option ne change pas la valeur de la liste déroulante - il ajoute juste la :selected propriété à l'option sélectionnée qui est un enfant de la liste déroulante.


1497
2018-05-18 20:14



Définir les valeurs pour chacune des options

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

$('#aioConceptName').val() n'a pas fonctionné parce que .val() retourne le value attribut. Pour le faire fonctionner correctement, le value les attributs doivent être définis sur chaque <option>.

Vous pouvez maintenant appeler $('#aioConceptName').val() au lieu de tout cela :selected le vaudou étant suggéré par d'autres.


268
2017-10-26 16:50



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).


138
2017-11-01 17:16



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();

42
2018-02-27 08:54



Si vous êtes dans un contexte d'événement, dans jQuery, vous pouvez récupérer l'élément d'option sélectionné en utilisant:
$(this).find('option:selected') comme ça :

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

modifier

Comme mentionné par PossessWithin, Ma réponse suffit de répondre à la question: Comment sélectionner "Option" sélectionné.

Ensuite, pour obtenir la valeur de l'option, utilisez option.val().


38
2017-07-09 15:30



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

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

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

Voir également Obtenir une option texte / valeur avec JavaScript


28
2018-05-08 18:18



$('#aioConceptName option:selected').val();

17
2017-11-26 23:25



<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>

10
2018-04-25 01:07