web-dev-qa-db-fra.com

jQuery Obtenir l'option sélectionnée dans la liste déroulante

J'utilise généralement $("#id").val() pour renvoyer la valeur de l'option sélectionnée, mais cette fois-ci cela ne fonctionne pas ... La balise sélectionnée a l'identifiant 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>
javascriptjqueryhtml
974
William Kinaan

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

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

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

1640
Elliot Bonneville

Définissez 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é car .val() renvoie l'attribut value. Pour que cela fonctionne correctement, les attributs value doivent être définis sur chaque <option>.

Vous pouvez maintenant appeler $('#aioConceptName').val() au lieu de tout ce :selected voodoo suggéré par d’autres.

303
Jacob Valenta

Je suis tombé sur cette question et ai développé une version plus concise de la réponse d'Elliot BOneville:

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

ou génériquement:

$('#id :pseudoclass')

Cela vous évite un appel jQuery supplémentaire, sélectionne tout d'un coup et est plus clair (à mon avis).

149
Ed Orsi

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();
50
Vladimir Djuricic

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 ceci: 

$('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 répond simplement à la question: Comment sélectionner "Option" sélectionnée. 

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

44
JoDev

Avez-vous envisagé d'utiliser du vieux javascript?

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

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

Voir aussi Obtenir un texte d'option/valeur avec JavaScript

29
Roonaan
$('#aioConceptName option:selected').val();
17
wild_nothing

Lecture de la valeur (pas du texte) d'une sélection: 

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

Comment désactiver une sélection? dans les deux variantes, la valeur peut être modifiée en utilisant: 

UNE

L'utilisateur ne peut pas interagir avec la liste déroulante. Et il ne sait pas quelles autres options pourraient exister.

$('#Status').prop('disabled', true);

B

L'utilisateur peut voir les options dans la liste déroulante mais toutes sont désactivées:

$('#Status option').attr('disabled', true);

Dans ce cas, $("#Status").val() ne fonctionnera que pour les versions jQuery inférieures à 1.9.0. Toutes les autres variantes fonctionneront.

Comment mettre à jour une sélection désactivée?

De code derrière vous pouvez toujours mettre à jour la valeur dans votre sélection. Il est désactivé uniquement pour les utilisateurs:

$("#Status").val(2);

Dans certains cas, vous devrez peut-être déclencher des événements:

$("#Status").val(2).change();
11
profimedica
<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>
11
Ol Sen

Utilisez également la fonction jQuery.val() pour sélectionner des éléments:

La méthode .val () est principalement utilisée pour obtenir les valeurs des éléments de formulaire tels que input, select et textarea. Dans le cas d'éléments sélectionnés, il retourne null quand aucune option n'est sélectionnée et un tableau contenant le valeur de chaque option sélectionnée quand il y en a au moins une et que c'est possible d'en sélectionner davantage car l'attribut multiple est présent.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

9
Salman A

Avec jQuery, ajoutez simplement un événement change et obtenez la valeur ou le texte sélectionné dans ce gestionnaire.

Si vous avez besoin de texte sélectionné, veuillez utiliser ce code:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

Ou si vous avez besoin de la valeur sélectionnée, veuillez utiliser ce code:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});
9
sanman

vous devriez utiliser cette syntaxe:

var value = $('#Id :selected').val();

Alors essayez ce code:

var values = $('#aioConceptName :selected').val();

vous pouvez tester dans Fiddle: http://jsfiddle.net/PJT6r/9/

voir à propos de cette réponse dans cet article

8
D.L.MAN

Pour quiconque découvre que la meilleure réponse ne fonctionne pas.

Essayez d'utiliser:

  $( "#aioConceptName option:selected" ).attr("value");

Cela fonctionne pour moi dans des projets récents, il est donc intéressant de le regarder.

8
user2709153

Juste cela devrait fonctionner:

var conceptName = $('#aioConceptName').val();
6
d.popov

J'espère que cela aide aussi à mieux comprendre et aide Essayez ceci ci-dessous, $('select[id="aioConceptName[]"] option:selected').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });
à plus de détails s'il vous plaît http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

2
Vijayaragavan

essayez celui-ci

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">
2
Haris Sultan

Vous pouvez essayer de le déboguer de cette façon:

console.log($('#aioConceptName option:selected').val())
2
swathi

Si vous voulez saisir l'attribut 'valeur' ​​au lieu du nœud de texte, cela fonctionnera pour vous:

var conceptName = $('#aioConceptName').find(":selected").attr('value');
2
Drodarious

Simple et assez facile: 

Votre liste déroulante 

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Code Jquery pour obtenir la valeur sélectionnée 

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});
1
Juan J

Généralement, vous devez non seulement obtenir la valeur sélectionnée, mais également exécuter une action. Alors, pourquoi ne pas éviter toute la magie de jQuery et simplement passer la valeur sélectionnée en tant qu’argument à l’appel d’action?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>
0
Roland

Vous pouvez utiliser $("#drpList").val();

0
Author PraWin

Vous pouvez sélectionner l’option exacte choisie: 

$("select#aioConceptName > option:selected").text()

Tandis que ci-dessous vous donnera une valeur. 

$("select#aioConceptName > option:selected").val()
0
Hafiz Shehbaz Ali
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Imaginez le DDL comme un tableau avec des index, vous sélectionnez un index. Choisissez celui que vous souhaitez définir avec votre JS.

0
Satista

Pour obtenir valeur de la balise sélectionnée:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

Et si vous voulez obtenir text utilisez ce code:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

Par exemple => cette balise est sélectionnée:

<div id="id_Of_Parent_Selected_Tag">
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
    </select>
</div>
<script>
 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
0
mamal

J'ai eu le même problème et j'ai compris pourquoi cela ne fonctionnait pas sur mon cas
La page html a été divisée en différents fragments html et j’ai constaté que j’avais un autre champ de saisie qui portait le même identifiant de select, ce qui faisait que val() était toujours vide
J'espère que cela sauvera la journée pour tous ceux qui ont le même problème.

0
Hasnaa Ibraheem

pour récupérer une sélection avec le même nom de classe = nom, vous pouvez vérifier si une option de sélection est sélectionnée.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});
0
thE_iNviNciblE

pour utiliser $ ("# id"). val, vous devriez ajouter une valeur à l'option comme ceci:

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

sinon, vous pouvez utiliser

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

Je souhaite que cela aide ..

0
Yusuf Azan