Obtenir la valeur sélectionnée dans la liste déroulante à l'aide de JavaScript


1784

Comment puis-je obtenir la valeur sélectionnée dans une liste déroulante en utilisant JavaScript?

J'ai essayé les méthodes ci-dessous, mais elles renvoient toutes l'index sélectionné au lieu de la valeur:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Réponses:


2928

Si vous avez un élément select qui ressemble à ceci:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Exécution de ce code:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Ferait strUserêtre 2. Si ce que vous voulez réellement test2, c'est:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

Ce qui ferait strUserêtretest2


13
@ R11G, utilisez onchange:)
AlexJaa

142
var strUser = e.options[e.selectedIndex].value;pourquoi pas seulementvar strUser = e.value ?
The Red Pea

18
@ TheRedPea — peut-être parce que lorsque cette réponse a été écrite, il y avait une chance (aussi éloignée) qu'une ancienne version de Netscape Navigator devait être adaptée, donc une méthode tout aussi ancienne pour accéder à la valeur d'une seule sélection a été utilisée. Mais je devine juste cela. ;-)
RobG

12
J'ai utilisé comme ceci:var e = document.getElementById("ddlViewBy").value;
Fathur Rohim

3
devrait être e.target.options[e.target.selectedIndex].textne sais pas pourquoi c'est faux dans toutes les réponses ici ..
OZZIE

373

JavaScript simple:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

1
Je dois faire quelque chose de mal parce que lorsque j'essaye, je récupère le texte de chaque option dans le menu déroulant.
Kevin

6
Cela a fonctionné pour moi de manière différente. $ ("# ddlViewBy: selected"). val () non sans sélectionné
Ruwantha

1
element.options[e.selectedIndex].valuedoit êtreelement.options[element.selectedIndex].value
Christopher

Toujours utile - merci d'avoir écrit les variations / langue! Maintenant, si je ne connaissais que l'équivalent pour Office JS API Dropdown ...
Cindy Meister

devrait être e.target.options[e.target.selectedIndex].textne sais pas pourquoi c'est faux dans toutes les réponses ici ..
OZZIE

174
var strUser = e.options[e.selectedIndex].value;

C'est correct et devrait vous donner la valeur. Est-ce le texte que vous recherchez?

var strUser = e.options[e.selectedIndex].text;

Vous êtes donc clair sur la terminologie:

<select>
    <option value="hello">Hello World</option>
</select>

Cette option a:

  • Index = 0
  • Valeur = bonjour
  • Texte = Bonjour tout le monde

1
je pensais que le ".value" en javascript devrait retourner la valeur pour moi mais seulement le ".text" retournerait comme ce que le .SelectedValue dans asp.net retourne. Merci pour l'exemple donné!
Fire Hand

1
Oui - faites la valeur de l'option la même que ce qu'elle est. Plus simple - le gars ci-dessus doit écrire plus de code pour compenser son imprécision initiale.
Andrew Koper du

devrait être e.target.options[e.target.selectedIndex].textne sais pas pourquoi c'est faux dans toutes les réponses ici ..
OZZIE

62

Le code suivant présente divers exemples liés à l'obtention / insertion de valeurs à partir de champs d'entrée / sélection à l'aide de JavaScript.

Lien source

Travail Javascript et JQuery Demo

entrez la description de l'image ici

entrez la description de l'image ici

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

Le script suivant obtient la valeur de l'option sélectionnée et la place dans la zone de texte 1

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

Le script suivant obtient une valeur d'une zone de texte 2 et envoie une alerte avec sa valeur

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

Le script suivant appelle une fonction à partir d'une fonction

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

onchange=run(this.value)ou (this.text)peut être plus efficace.
Berci


22

Si vous rencontrez un code écrit uniquement pour Internet Explorer, vous pouvez voir ceci:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

L'exécution de ce qui précède dans Firefox et al vous donnera une erreur «n'est pas une fonction», car Internet Explorer vous permet de vous en sortir en utilisant () au lieu de []:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

La bonne façon est d'utiliser des crochets.


19
<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

Tout champ de saisie / formulaire peut utiliser un mot-clé «this» lorsque vous y accédez depuis l'intérieur de l'élément. Cela élimine le besoin de localiser un formulaire dans l'arborescence dom, puis de localiser cet élément à l'intérieur du formulaire.


Une explication serait de mise.
Peter Mortensen

14

Les débutants sont susceptibles de vouloir accéder aux valeurs d'une sélection avec l'attribut NAME plutôt que l'attribut ID. Nous savons que tous les éléments de formulaire ont besoin de noms, même avant d'obtenir des identifiants.

Donc, j'ajoute le getElementByName() solution uniquement pour les nouveaux développeurs.

NB. Les noms des éléments du formulaire devront être uniques pour que votre formulaire soit utilisable une fois publié, mais le DOM peut autoriser le partage d'un nom par plusieurs éléments. Pour cette raison, envisagez d'ajouter des ID aux formulaires si vous le pouvez, ou soyez explicite avec les noms des éléments de formulairemy_nth_select_named_x etmy_nth_text_input_named_y .

Exemple utilisant getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Ne fonctionne pas si my_select_with_name_ddlViewBy est un tableau comme my_select_with_name_ddlViewBy []
zeuf

14

Il existe deux façons de procéder, à l'aide de JavaScript ou de jQuery.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

OU

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

12

Utilisez simplement

  • $('#SelectBoxId option:selected').text(); pour obtenir le texte comme indiqué

  • $('#SelectBoxId').val(); pour obtenir la valeur d'index sélectionnée


5
Cela utilise jQuery, qui ne répond pas à la question de l'OP.
David Meza

9

Les réponses précédentes laissent encore place à l'amélioration en raison des possibilités, de l'intuitivité du code et de l'utilisation de idversus name. On peut obtenir une lecture de trois données d'une option sélectionnée - son numéro d'index, sa valeur et son texte. Ce code simple, multi-navigateur, fait les trois:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

Démo en direct: http://jsbin.com/jiwena/1/edit?html,output .

iddevrait être utilisé à des fins de maquillage. À des fins de formulaire fonctionnel, nameest toujours valide, également en HTML5, et doit toujours être utilisé. Enfin, pensez à l'utilisation de crochets contre des crochets ronds à certains endroits. Comme cela a été expliqué précédemment, seules (les anciennes versions de) Internet Explorer acceptent les versions rondes partout.



7

Une autre solution est:

document.getElementById('elementId').selectedOptions[0].value

6

Exemple de fonctionnement:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);
<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

Remarque: Les valeurs ne changent pas lorsque la liste déroulante est modifiée, si vous avez besoin de cette fonctionnalité, une modification onClick doit être implémentée.


Bonne réponse pour montrer comment le code doit être actualisé après utilisation!
Utilisateur qui n'est pas un utilisateur

5

Vous pouvez utiliser querySelector.

Par exemple

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

5

J'ai une vision un peu différente de la façon d'y parvenir. Je fais généralement cela avec l'approche suivante (c'est un moyen plus facile et fonctionne avec tous les navigateurs pour autant que je sache):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>


4

Pour suivre les réponses précédentes, voici comment je le fais en monoplace. C'est pour obtenir le texte réel de l'option sélectionnée. Il existe déjà de bons exemples pour obtenir le numéro d'index. (Et pour le texte, je voulais juste montrer de cette façon)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

Dans certains cas rares, vous devrez peut-être utiliser des parenthèses, mais ce serait très rare.

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

Je doute que ce processus soit plus rapide que la version à deux lignes. J'aime simplement consolider mon code autant que possible.

Malheureusement, cela récupère toujours l'élément deux fois, ce qui n'est pas idéal. Une méthode qui ne saisit l'élément qu'une seule fois serait plus utile, mais je ne l'ai pas encore compris, en ce qui concerne le faire avec une seule ligne de code.


3

Voici une ligne de code JavaScript:

var x = document.form1.list.value;

En supposant que le menu déroulant nommé liste name="list"et inclus dans un formulaire avec l'attribut name name="form1".


OP a dit que cela ne fonctionnait pas pour eux: "J'ai essayé les méthodes ci-dessous mais elles renvoient toutes l'index sélectionné au lieu de la valeur: var as = document.form1.ddlViewBy.value;..."
Utilisateur qui n'est pas un utilisateur

2

Vous devez utiliser querySelectorpour y parvenir. Cela standardise également la façon d'obtenir de la valeur à partir des éléments de formulaire.

var dropDownValue = document.querySelector('#ddlViewBy').value;

Violon: https://jsfiddle.net/3t80pubr/


1

Je ne sais pas si je suis celui qui ne répond pas à la question, mais cela a fonctionné pour moi: en utilisant un événement onchange () dans votre html, par exemple.

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// javascript

function sele(){
    var strUser = numberToSelect.value;
}

Cela vous donnera la valeur de la liste déroulante sélectionnée par clic


1

La façon la plus simple de le faire est:

var value = document.getElementById("selectId").value;

Il ne veut pas la valeur mais le texte affiché de la boîte de sélection
Thanasis

0

Voici un moyen simple de le faire dans une fonction onchange:

event.target.options[event.target.selectedIndex].dataset.name


1
En parlant de simplicité, je pensais à cela au lieu de event.target
Christian Læirbag

0

Faites juste: document.getElementById('idselect').options.selectedIndex

Ensuite, vous obtiendrez une valeur d'index sélectionnée, en commençant par 0.


Cela ne fonctionne pas
Hujjat Nazari

-1

Essayer

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label


-1

Créez un menu déroulant avec plusieurs options (autant que vous le souhaitez!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

J'ai rendu un peu hilarant. Voici l'extrait de code:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

yay l'extrait a fonctionné

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.