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函数中，您只需引用选择框的值即可；默认情况下，如果该选项上没有value属性，则默认使用该选项的文本。

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，并且当选项没有指定值时，它们的内容将默认为该值。

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>

获取选项标签的名称

3 个答案: