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

Wenn Sie jemals auf Code stoßen, der nur für den Internet Explorer geschrieben wurde, könnten Sie dies sehen:

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

Wenn Sie den obigen Befehl in Firefox und anderen Programmen ausführen, erhalten Sie die Fehlermeldung "is not a function", da der Internet Explorer die Verwendung von () anstelle von [] zulässt:

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

Richtig ist es, eckige Klammern zu verwenden.

Answer 2

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

Jedes Eingabe-/Formularfeld kann ein "this"-Schlüsselwort verwenden, wenn Sie von innerhalb des Elements darauf zugreifen. Dadurch entfällt die Notwendigkeit, ein Formular im Dom-Baum zu suchen und dann dieses Element innerhalb des Formulars zu finden.

Answer 3

Es gibt zwei Möglichkeiten, dies zu erreichen, entweder mit JavaScript oder jQuery.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

OR

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'

Answer 4

Anfänger werden wahrscheinlich eher mit dem NAME-Attribut als mit dem ID-Attribut auf Werte aus einem Select zugreifen wollen. Wir wissen, dass alle Formularelemente Namen brauchen, noch bevor sie IDs erhalten.

Also, ich füge die getElementsByName() Lösung auch für neue Entwickler zu sehen.

Hinweis: Die Namen für Formularelemente müssen eindeutig sein, damit Ihr Formular nach dem Absenden verwendet werden kann, aber das DOM kann zulassen, dass ein Name von mehr als einem Element verwendet wird. Aus diesem Grund sollten Sie, wenn möglich, IDs zu den Formularen hinzufügen oder die Namen der Formularelemente explizit angeben my_nth_select_named_x y my_nth_text_input_named_y .

Beispiel mit getElementsByName :

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

Answer 5

Verwenden Sie einfach

• $('#SelectBoxId option:selected').text(); um den Text wie angegeben zu erhalten

• $('#SelectBoxId').val(); um den ausgewählten Indexwert zu erhalten