web-dev-qa-db-fra.com

Obtenir la valeur sélectionnée dans la liste déroulante en utilisant JavaScript?

Comment puis-je obtenir la valeur sélectionnée dans une liste déroulante à l'aide de JavaScript?

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

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
var value = document.getElementById("ddlViewBy").value;
javascripthtml-select
1485
Fire Hand

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>

Lancer ce code:

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

Faudrait que strUser soit 2. Si ce que vous voulez réellement est test2, procédez comme suit:

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

Ce qui ferait strUser être test2

2513
Paolo Bergantino

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").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'
}];
312
Vitalii Fedorenko
var strUser = e.options[e.selectedIndex].value;

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

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

Donc, vous êtes clair sur la terminologie:

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

Cette option a:

  • Indice = 0
  • Valeur = bonjour
  • Texte = Bonjour tout le monde
162
Greg

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

Lien source

Travailler Demo

 <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 met 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 l'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>
51
Code Spy
var selectedValue = document.getElementById("ddlViewBy").value;
29
Mohammad Faisal

Si jamais vous rencontrez du code écrit uniquement pour IE, vous pourriez voir ceci:

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

En exécutant ce qui précède dans Firefox, vous obtiendrez une erreur «n'est pas une fonction» car IE vous permet d'éviter d'utiliser () au lieu de []:

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

La bonne façon consiste à utiliser des crochets.

18
Carl Onager
<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>
13
boateng

Juste utiliser

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

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

12
Marvil Joy

Les débutants voudront probablement 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 qu’ils n’obtiennent des identifiants.

J'ajoute donc la solution getElementByName() uniquement aux nouveaux développeurs.

NB Les noms des éléments de formulaire doivent être uniques pour que votre formulaire puisse être utilisé une fois posté, mais le DOM peut permettre à un nom d'être partagé par plusieurs éléments. Pour cette raison, envisagez d'ajouter des identifiants aux formulaires si vous le pouvez ou explicitez-vous avec les noms d'éléments de formulaire my_nth_select_named_x et my_nth_text_input_named_y.

Exemple utilisant getElementByName:

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

Les réponses précédentes peuvent encore être améliorées en raison des possibilités, de l’intuitivité du code et de l’utilisation de id contre 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 simple code inter-navigateurs 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 . 

id devrait être utilisé à des fins de maquillage. Pour les besoins de la forme fonctionnelle, name est toujours valide, également en HTML5, et doit toujours être utilisé. Enfin, faites attention à l’utilisation des crochets carrés et ronds à certains endroits. Comme expliqué précédemment, seules (les anciennes versions de) IE accepteront les versions rondes partout. 

8
Frank Conijn

Reportez-vous à l'article Sélection d'un élément déroulant avec JavaScript ou jQuery. Ils l'ont expliqué de nombreuses manières en utilisant JavaScript et jQuery.

Utilisation de jQuery:

$(‘select’).val();
6
user5846985

Vous pouvez utiliser querySelector.

Par exemple. 

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

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

Exemple courant de son 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 le menu déroulant est modifié. Si vous souhaitez utiliser cette fonctionnalité, une modification onClick doit être implémentée.

4
Ani Menon

Pour ce faire, il existe deux façons d'utiliser JavaScript ou 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'
4
Dulith De Costa

Pour aller avec les réponses ci-dessus, voici comment je le fais en one-liner. C'est pour obtenir le texte réel de l'option sélectionnée. Il existe de bons exemples pour obtenir déjà le numéro d'index. (Et pour le texte, je voulais juste montrer de cette façon)

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

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

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

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

Si quelqu'un sait comment faire cela en une ligne sans avoir à obtenir l'élément deux fois, j'aimerais beaucoup que vous commentiez et montriez-moi comment. Je n'ai pas encore compris ça ...

3
Genko

En 2015, dans Firefox , les éléments suivants fonctionnent également.

e .options .selectedIndex

3
Hector Llorens

une autre solution est:

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

Voici une ligne de code JavaScript:

var x = document.form1.list.value;

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

2
Belgacem Ksiksi

Il suffit de faire: document.getElementById('idselect').options.selectedIndex

Ensuite, vous obtiendrez une valeur d’index de sélection commençant à 0.

1
Knautiluz

La seule raison pour laquelle je peux voir que ce code ne fonctionne pas, c'est si vous utilisez IE7 et oubliez de spécifier l'attribut value pour vos balises <option>- ... Tous les autres navigateurs doivent convertir le contenu des balises open-close en tant qu'option valeur.

1
peirix

Vous pouvez simplement utiliser selectElement.value pour obtenir la valeur de l'option sélectionnée de la sélection.

document.getElementById("idOfSelect").value;


var res = document.querySelector('p');
var select = document.querySelector('select');
res.textContent = "Selected Value: "+select.value;
select.addEventListener("change", function(e){
  res.textContent = "Selected Value: "+select.value;
});
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Change value of the select to show the value.
<p>
</p>

0
hev1

J'ai un point de vue différent, comment y parvenir. Je fais généralement cela avec l'approche suivante: (C'est un moyen plus simple 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>
0
ThomAce