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

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;

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

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

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

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

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

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

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.

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

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;

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'

Utilisez simplement

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

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

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.

Utilisation de jQuery:

$('select').val();

Une autre solution est:

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

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.

Vous pouvez utiliser querySelector.

Par exemple

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

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

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>

En 2015, dans Firefox , ce qui suit fonctionne également.

e. options .selectedIndex

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.

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

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/

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

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

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

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

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

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

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

Essayer

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

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é