Die bisherigen Antworten lassen noch Raum für Verbesserungen, was die Möglichkeiten, die Intuitivität des Codes und die Verwendung von id
gegen name
. Man kann drei Daten einer ausgewählten Option auslesen - ihre Indexnummer, ihren Wert und ihren Text. Dieser einfache, browserübergreifende Code tut alle drei:
<!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"> </p>
<p id="secondP"> </p>
<p id="thirdP"> </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-Demo: http://jsbin.com/jiwena/1/edit?html,output .
id
sollte für Make-up-Zwecke verwendet werden. Für Zwecke der funktionalen Form, name
ist immer noch gültig, auch in HTML5, und sollte weiterhin verwendet werden. Achten Sie schließlich auf die Verwendung von eckigen und runden Klammern an bestimmten Stellen. Wie bereits erwähnt, akzeptieren nur (ältere) Versionen des Internet Explorer runde Klammern an allen Stellen.
0 Stimmen
Wie kann ich den ausgewählten Wert erhalten, wenn ich das Attribut "ausgewählt" nicht verwende?