jQuery Obtenir l'option sélectionnée dans 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'identifiantaioConceptName

Code HTML

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

Pour les options déroulantes, 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 :selectedpropriété à l'option sélectionnée qui est une enfant de la liste déroulante.

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' valueattribut. Pour le faire fonctionner correctement, les valueattributs doivent être définis sur chaque<option> .

Vous pouvez maintenant appeler à la $('#aioConceptName').val()place de tout ce :selectedvaudou suggéré par d'autres.

Je suis tombé 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 une seule fois et est plus clair (mon avis).

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

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

Éditer

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

Avez-vous envisagé d'utiliser du javascript pur et simple?

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

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

Voir aussi Obtention d'un texte / d'une valeur d'option avec JavaScript

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

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?

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

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

vous devez utiliser cette syntaxe:

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

Essayez donc ce code:

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

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

voir à propos de cette réponse dans ce post

À l'aide de jQuery, ajoutez simplement un changeévénement et obtenez la valeur ou le texte sélectionné dans ce gestionnaire.

Si vous avez besoin d'un texte sélectionné, veuillez utiliser ce code:

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

Ou si vous avez besoin d'une valeur sélectionnée, veuillez utiliser ce code:

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

Utilisez également la jQuery.val()fonction 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 la saisie, la sélection et la zone de texte. Dans le cas des éléments sélectionnés, il renvoie nulllorsqu'aucune option n'est sélectionnée et un tableau contenant la valeur de chaque option sélectionnée lorsqu'il y en a au moins un et qu'il est possible d'en sélectionner plus car l' multipleattribut 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>

Pour ceux qui ont découvert la meilleure réponse, cela ne fonctionne pas.

Essayez d'utiliser:

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

Fonctionne pour moi dans des projets récents donc ça vaut le coup d'y regarder.

Cela devrait fonctionner:

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

Simple et assez simple:

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

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

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

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

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

Et si vous voulez obtenir du texte, utilisez ce code:

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

Par exemple:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>

Si vous souhaitez récupérer l'attribut 'value' au lieu du nœud de texte, cela fonctionnera pour vous:

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

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">

$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

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

J'espère que cela aide également à mieux comprendre et aide à essayer ci-dessous,

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

pour plus de détails, veuillez http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

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

pour récupérer une sélection avec le même nom de classe = vous pouvez le faire, pour 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;
    }
});

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 trouvé que j'avais un autre champ de saisie qui porte le même identifiant du select, ce qui a fait que le val()soit toujours vide
J'espère que cela sauve la mise pour tous ceux qui ont un problème similaire.

pour utiliser $ ("# id"). val, vous devez 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 ..

Voici la solution simple à ce problème.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

Votre meilleur pari avec ce type de scénario est probablement d'utiliser la méthode de changement de jQuery pour trouver la valeur actuellement sélectionnée, comme ceci:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

Je préfère cette méthode car vous pouvez ensuite exécuter des fonctions pour chaque option sélectionnée dans un champ de sélection donné.

J'espère que cela pourra aider!

Habituellement, vous devez non seulement obtenir la valeur sélectionnée, mais également exécuter une action. Alors pourquoi ne pas éviter toute la magie jQuery et passer simplement la valeur sélectionnée comme argument à l'appel d'action?

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

Vous pouvez sélectionner en utilisant l'option sélectionnée exacte: ci-dessous donnera innerText

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

Alors que ci-dessous vous donnera de la valeur.

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