JQuery Obtenez 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-ci ne fonctionne pas. La balise sélectionnée a l'id aioConceptName

Code html

  • Détecter quelle police a été utilisée dans une page Web
  • Décoder les entités HTML en JavaScript?
  • Entourant les mots individuels dans le texte HTML avec des balises SPAN?
  • Comment puis-je créer une liste déroulante modifiable en HTML / Javascript?
  • Erreur: Uncaught TypeError: impossible de définir la propriété 'innerHTML' de null
  • Comment résoudre Uncaught RangeError lors du téléchargement de json de grande taille
  •  <label>Name</label> <input type="text" name="name" /> <select id="aioConceptName"> <option>choose io</option> <option>roma</option> <option>totti</option> </select> 

  • WebRTC: comment ajouter le flux après l'offre et la réponse?
  • Comment manipuler la clé contextuelle ESC sur la fenêtre contextuelle javascript
  • Comment puis-je tester l'application dépendante du fuseau horaire de votre navigateur sur plusieurs zones horaires différentes?
  • Comment fonctionne exactement! Function () {} () work?
  • Uncaught SyntaxError: jeton inattendu:
  • Comment se moquer des importations d'un module ES6?
  • 15 Solutions collect form web for “JQuery Obtenez l'option sélectionnée à partir de la liste déroulante”

    Pour les options déroulantes, vous voulez probablement quelque chose comme ceci:

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

    La raison pour laquelle val() ne fait pas l'affaire est parce que cliquer sur une option ne modifie pas la valeur du menu déroulant – il ajoute simplement :selected propriété :selected à l'option sélectionnée qui est un 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'attribut de value . Pour que cela fonctionne correctement, les attributs de value doivent être définis sur chaque <option> .

    Maintenant, vous pouvez appeler $('#aioConceptName').val() au lieu de tout ceci :selected voodoo 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 enregistre un appel jQuery supplémentaire, sélectionne tout en un seul coup, 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(); 

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

     var box = document.getElementById('aioConceptName'); conceptName = box.options[box.selectedIndex].text; 

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

    Si vous êtes dans le contexte de l'événement, 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 à la question suivante: Comment sélectionner "Option" sélectionnée.

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

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

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

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

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

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

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

    Utilisez également la fonction jQuery.val() pour certains éléments:

    La méthode .val () est principalement utilisée pour obtenir les valeurs des éléments de formulaire tels que l'entrée, la sélection et la zone de texte. Dans le cas d'éléments sélectionnés, il retourne null lorsqu'aucune option n'est sélectionnée et un tableau contenant la valeur de chaque option sélectionnée lorsqu'il y a au moins un et il est possible de sélectionner plus 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> 
     <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> 

    Pour ceux qui ont découvert que la meilleure réponse ne fonctionnent pas.

    Essayez d'utiliser:

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

    Fonctionne pour moi dans des projets récents, donc il vaut la peine de l'examiner.

    Juste cela devrait fonctionner:

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

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

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

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

    Comment désactiver un choix? Dans les deux variantes, la valeur peut être modifiée en utilisant:

    UNE

    L'utilisateur ne peut pas interagir avec le menu déroulant. Et il sait ce que d'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, $ ("# Statut"). 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, vous pouvez encore 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(); 

    J'espère que ceci aide à mieux comprendre et aide à essayer ceci 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 s'il vous plaît http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.