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

Question

Comment 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 e = document.getElementById("ddlViewBy");
function show(){
  var as = document.forms[0].ddlViewBy.value;
  var strUser = e.options[e.selectedIndex].value;
  console.log(as, strUser);
}
e.onchange=show;
show();

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

Answer 1

Si vous avez un élément de sélection qui ressemble à ceci :

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

J'exécute ce code :

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

Ferait strUser sea 2 . Si ce que vous voulez vraiment est test2 alors faites ceci :

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

Ce qui ferait strUser sea test2

Answer 2

Plain JavaScript :

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'
}];

Answer 3

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

Ceci est correct et devrait vous donner la valeur. C'est le texte que vous cherchez ?

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

Vous êtes donc au clair sur la terminologie :

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

Cette option a :

• Index = 0
• Valeur = bonjour
• Texte = Hello World

Answer 4

Le code suivant présente divers exemples liés à l'obtention/la saisie de valeurs dans des champs de saisie/sélection à l'aide de JavaScript.

Lien vers la source

Travail Démonstration de Javascript et jQuery

 <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 récupère 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 récupère une valeur dans une zone de texte 2 et émet une alerte avec cette valeur.

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

Le script suivant appelle une fonction depuis une fonction.

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

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

Answer 5

Si vous rencontrez du code écrit uniquement pour Internet Explorer, vous verrez peut-être ceci :

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

Si vous exécutez l'opération ci-dessus dans Firefox et autres, vous obtiendrez une erreur "n'est pas une fonction", car Internet Explorer vous permet d'utiliser () au lieu de [] :

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

La bonne méthode consiste à utiliser des crochets.