Vraag Krijg geselecteerde waarde in drop-down lijst met behulp van JavaScript?


Hoe krijg ik de geselecteerde waarde uit een vervolgkeuzelijst met JavaScript?

Ik heb de onderstaande methoden geprobeerd maar ze geven allemaal de geselecteerde index terug in plaats van de waarde:

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


oorsprong


antwoorden:


Als u een select element heeft dat er zo uitziet:

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

Deze code wordt uitgevoerd:

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

Zou maken strUser worden 2. Als wat je eigenlijk wilt is test2, doe dit dan:

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

Wat zou maken strUser worden test2


2330
2017-07-06 07:29



Gewoon 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").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;

Dit is correct en zou u de waarde moeten geven. Is dit de tekst waarnaar je op zoek bent?

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

Dus je bent duidelijk over de terminologie:

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

Deze optie heeft:

  • Index = 0
  • Waarde = hallo
  • Tekst = Hallo wereld

155
2017-07-06 07:29



De volgende code bevat verschillende voorbeelden met betrekking tot het ophalen / plaatsen van waarden uit invoer- / selectievelden met behulp van JavaScript.

Werken 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()">

Het volgende script krijgt de waarde van de geselecteerde optie en plaatst deze in tekstvak 1

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

Het volgende script krijgt een waarde uit een tekstvak 2 en een waarschuwing met zijn waarde

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

Het volgende script roept een functie op vanuit een functie

<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



Als je ooit de code tegenkomt die alleen voor IE is geschreven, zou je dit kunnen zien:

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

Het bovenstaande uitvoeren in Firefox et al geeft u een 'is geen functie'-fout omdat IE u toestaat weg te komen met het gebruik van () in plaats van []:

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

De juiste manier is om vierkante haakjes te gebruiken.


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



Gebruik gewoon

  • $('#SelectBoxId option:selected').text(); voor het krijgen van de tekst zoals vermeld

  • $('#SelectBoxId').val(); voor het verkrijgen van de geselecteerde indexwaarde


11
2018-02-18 11:01



Beginners zullen waarschijnlijk toegang willen hebben tot waarden van een selectie met het kenmerk NAME in plaats van het ID-kenmerk. We weten dat alle formulierelementen namen nodig hebben, zelfs voordat ze ID's krijgen.

Dus ik voeg het toe getElementByName() oplossing alleen voor nieuwe ontwikkelaars om te zien.

NB. namen voor formulierelementen moeten uniek zijn voor uw formulier om bruikbaar te zijn nadat het is gepost, maar de DOM kan toestaan ​​dat een naam door meer dan één element wordt gedeeld. Overweeg daarom om id's aan formulieren toe te voegen als je kunt, of expliciet te zijn met namen van formulierelementen my_nth_select_named_x en my_nth_text_input_named_y.

Voorbeeld met getElementByName:

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

11
2018-03-09 03:32



De eerdere antwoorden laten nog ruimte voor verbetering vanwege de mogelijkheden, de intuïtiviteit van de code en het gebruik van id versus name. Men kan een uitlezing krijgen van drie gegevens van een geselecteerde optie: het indexnummer, de waarde en de tekst. Deze eenvoudige code voor meerdere browsers werkt alle drie:

<!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 demonstratie: http://jsbin.com/jiwena/1/edit?html,output .

id moet worden gebruikt voor make-updoeleinden. Voor functionele vorm doeleinden, name is nog steeds geldig, ook in HTML5, en zou nog steeds moeten worden gebruikt. Let ten slotte op het gebruik van vierkante versus ronde haakjes op bepaalde plaatsen. Zoals eerder uitgelegd, accepteren alleen (oudere versies van) IE overal ronde versies.


7
2018-05-22 02:42