Warum wird der innere Text eines Optionselements nicht angezeigt?

Question

HTML

<label name="sel">choose your part</label> 
<select id="sel"> 
<option></option> 
<optgroup label="Part 1"> 
<option value="1">1</option> 
<option value="2">2</option> 
</optgroup> 
<optgroup label="Part 2"> 
<option value="a">a</option> 
<option value="b">b</option> 
</optgroup> 
</select> 

JS

var a = document.getElementById('sel'); 
a.addEventListener('change',call_name,false) ; 

function call_name() { 
    alert(this.innerText); 
} 

In der Alert-Box, ist es leer, aber wenn ich this.value schreiben zeigt es den Wert der Option. Warum zeigt this.innerText eine leere Zeichenfolge anstelle von Text zwischen ihnen?

Answer 1

Es gibt eine spezielle API dafür this.options[this.selectedIndex].text.

innerText wird Feature nicht-standartized wie auf MDN sagte

dies versuchen:

var a = document.getElementById('sel'); 
 
a.addEventListener('change',call_name,false) ; 
 

 
function call_name() { 
 
    alert(this.options[this.selectedIndex].text); 
 
}

<label name="sel">choose your part</label> 
 
<select id="sel"> 
 
    <option></option> 
 
    <optgroup label="Part 1"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    </optgroup> 
 
    <optgroup label="Part 2"> 
 
    <option value="a">a</option> 
 
    <option value="b">b</option> 
 
    </optgroup> 
 
</select>