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

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

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

ceci est correct et devrait vous donner la valeur. C'est 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:

• Index = 0
• Value = bonjour
• Text = Hello World

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

Travail DÉMO

 <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 reçoit une valeur d'un zone de texte 2 et 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>

var selectedValue = document.getElementById("ddlViewBy").value;

si vous rencontrez un code écrit uniquement pour IE, vous pourriez voir ceci:

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

exécuter ce qui précède dans Firefox et al vous donnera une erreur 'n'est pas une fonction' car IE vous permet de vous en tirer avec l'utilisation de () Au lieu de []:

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

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

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

il suffit d'utiliser

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

• $('#SelectBoxId').val(); pour obtenir l'indice sélectionné

les débutants sont susceptibles de vouloir accéder à des valeurs à partir d'un select avec l'attribut NAME plutôt que L'attribut ID. Nous savons que tous les éléments de forme ont besoin de noms, même avant qu'ils n'obtiennent des ID.

donc, j'ajoute la solution getElementByName() juste pour les nouveaux développeurs de voir aussi.

NB. les noms des éléments de formulaire devront être uniques pour que votre formulaire soit utilisable une fois affiché, mais le DOM peut permettre qu'un nom soit partagé par Plus d'un élément. Pour cette raison envisagez d'ajouter des ID aux formulaires si vous le pouvez, ou soyez explicite avec les noms d'éléments de formulaires 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;

les réponses précédentes laissent encore place à des améliorations en raison des possibilités, de l'intuition du code et de l'utilisation de id par rapport à name . On peut obtenir une lecture de trois données d'une option sélectionnée, son numéro d'index, de sa valeur et de son texte. Ce simple, cross-browser code fait tous 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>

live demo: http://jsbin.com/jiwena/1/edit?html, sortie .

id devrait être utilisé pour le faire. Pour les besoins de la forme fonctionnelle, name est toujours valide, également dans HTML5, et doit encore être utilisé. Enfin, l'esprit, l'utilisation carrés par rapport aux parenthèses dans certains endroits. Comme expliqué précédemment, seules les versions (anciennes) D'IE accepteront les rondes dans tous les endroits.

se Reporter à l'article Sélection de la liste déroulante de l'élément à l'aide de JavaScript ou jQuery . Ils l'ont expliqué de nombreuses façons en utilisant JavaScript et jQuery.

utilisant jQuery:

$(‘select’).val();

vous pouvez utiliser querySelector .

E. G.

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

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

en 2015, Dans Firefox , le suivant fonctionne également.

E. options .selectedIndex

pour aller avec les réponses ci-dessus, c'est comme ça que je le fais comme une doublure. C'est pour obtenir le texte de l'option sélectionnée. Il y a de bons exemples pour obtenir le numéro d'index déjà. (Et pour le texte, je voulais juste montrer de cette façon)

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

Dans quelques rares cas, vous pouvez avoir besoin d'utiliser des parenthèses, mais ce 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'ai simplement comme pour 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 que vous commentez et me montrer comment. Je n'ai pas été capable de trouver la réponse encore...

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>

Note: les valeurs ne changent pas au fur et à mesure que la liste déroulante est modifiée, si vous avez besoin de cette fonctionnalité, alors un changement de clic doit être implémenté.

Voici une ligne de code JavaScript:

var x = document.form1.list.value;

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

une autre solution est:

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

il y a deux façons de faire ceci en utilisant JavaScript ou JQuery .

JavaScript:

var getValue = document.getElementsById('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'

la seule raison pour laquelle je peux voir que ce code ne fonctionne pas est si vous utilisez IE7-, et avez oublié de spécifier l'attribut de valeur pour vos <option> - tags... Chaque autre navigateur devrait convertir ce qui est à l'intérieur des balises open-close comme valeur d'option.

j'ai une vision un peu différente, comment y arriver. J'ai l'habitude de le faire avec la démarche suivante: Il est plus facile à moyen et fonctionne avec tous les navigateurs pour autant que je sais.)

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

voici un moyen facile de le faire dans une fonction onchange:

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