获取选项标签的名称

Question

我有html的下拉菜单，我在后端有一本字典来获取密钥。因为下拉列表是动态创建的，所以用户不断添加它。

<select id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Opel</option>
  <option>Audi</option>
</select>

现在因为没有值属性

<option value="volvo">Volvo</option> 

如何在用户选择时使用onchange属性获取选项名称

<option>Saab</option>

javascript应该能够获得Saab并将其插入b / w h1标签

document.querySelector('#cars').onchange=function(){
            document.querySelector('h1').innerHTML = //what to enter 
           // here to fetch get name of option currently selected.

           };

           <h1><h1>

Answer 1

在onchange函数中，您可以简单地参考选择框的值;默认情况下，如果选项上没有值属性，则默认使用选项的文本。

document.querySelector('#cars').onchange = function() {
  document.querySelector('h1').innerHTML = this.value;
};

<select id="cars">
  <option>Saab</option>
  <option>Honda</option>
  <option>Volkswagen</option>
</select>

<h1 id="result"></h1>

Answer 2

您只需要this.value，因为this指的是select和when选项没有指定值，它们的内容默认为值。

document.querySelector('#cars').onchange = function() {
  document.querySelector('h1').innerHTML = this.value
};

<select id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Opel</option>
  <option>Audi</option>
</select>
<h1><h1>

Answer 3

document.querySelector('#cars').onchange=function(){
    document.querySelector('h1').innerHTML = this.options[this.selectedIndex].value
};

<select id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Opel</option>
  <option>Audi</option>
</select>
<h1><h1>