Ausgewählten Wert in Dropdown-Liste mit JavaScript abrufen

Question

Wie erhalte ich den ausgewählten Wert aus einer Dropdown-Liste mit JavaScript?

Ich habe die folgenden Methoden ausprobiert, aber sie geben alle den ausgewählten Index statt des Wertes zurück:

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

Versuchen Sie

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>

Answer 2

Hier ist eine einfache Möglichkeit, dies in einer onchange-Funktion zu tun:

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

Answer 3

<select name="test" id="test" >
    <option value="1" full-name="Apple">A</option>
    <option value="2" full-name="Ball">B</option>
    <option value="3" full-name="Cat" selected>C</option>
</select>

var obj  = document.getElementById('test');
obj.options[obj.selectedIndex].value;  //3
obj.options[obj.selectedIndex].text;   //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true

Answer 4

Tun Sie es einfach: document.getElementById('idselect').options.selectedIndex

Dann erhalten Sie einen Select-Index-Wert, der bei 0 beginnt.

Answer 5

Erstellen Sie ein Dropdown-Menü mit mehreren Optionen (so viele wie Sie wollen!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

Ich habe mich ein bisschen lustig gemacht. Hier ist der Code-Schnipsel:

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

Ja, das Snippet hat funktioniert