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


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

J'ai essayé les méthodes ci-dessous mais elles retournent 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;
var value = document.getElementById("ddlViewBy").value;

1370
2017-07-06 07:25


origine


Réponses:


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écuter ce code:

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

Rendrait strUser être 2. Si ce que tu veux vraiment c'est test2, alors faites ceci:

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

Ce qui ferait strUser être test2


2330
2017-07-06 07:29



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

280
2017-12-18 02:08



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

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

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

155
2017-07-06 07:29



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

Travail 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 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 d'une fonction

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

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

47
2017-12-03 06:50



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

21
2017-10-25 13:27



Si vous utilisez un code écrit uniquement pour IE, vous pourriez 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 IE vous permet de sortir avec using () au lieu de []:

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

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


18
2018-06-18 15:28



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

12
2018-04-14 13:45



Juste utiliser

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

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


11
2018-02-18 11:01



Les débutants voudront probablement accéder aux valeurs d'un select 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 juste pour les nouveaux développeurs à voir aussi.

NB les noms des éléments de formulaire devront être uniques pour que votre formulaire soit utilisable une fois publié, mais le DOM peut permettre à un nom d'être partagé par plusieurs éléments. Pour cette raison, pensez à ajouter des ID aux formulaires si vous le pouvez, ou soyez explicites 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
2018-03-09 03:32



Les réponses précédentes laissent encore place à amélioration 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 code simple, multi-navigateur 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>

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

id devrait être utilisé à des fins de maquillage. À des fins de forme fonctionnelle, name est toujours valide, également en HTML5, et devrait toujours être utilisé. Enfin, attention à l'utilisation des carrés par rapport aux parenthèses à certains endroits. Comme cela a été expliqué précédemment, seules les anciennes versions d'IE acceptent les rondes dans tous les endroits.


7
2018-05-22 02:42