Question

以下Javascript代码获取下拉列表中所有选项的列表。例如）

first option
second option
third option

var dropDown = document.getElementById('dropDownId'); var optionsList= dropDown.options;

这也是与每个下拉选项关联的值属性id。如何获得id选项？例如，我如何获得id的{{1}}？

Answer 1

只是

var idOfSecondOption = document.getElementById('dropDownId').options[1].id

Answer 2

说你有

<select id="dropDownId">
    <option id="A" value="X">first option</option>
    <option id="B" value="Y">second option</option>
    <option id="C" value="Z">third option</option>
</select>

然后你可以做类似

的事情

function getIdsOfOptions(select) {
    return Array.prototype.map.call(select.options, function (e) {return e.id;});
}
var option_ids = getIdsOfOptions(document.getElementById('dropDownId'));
// ["A", "B", "C"]
console.log(option_ids[1]); // log id of second <option>
// B logged

DEMO （代码在元素存在后运行）

Answer 3

你javascript：

var dropDown = document.getElementById('dropDownId');
var optionsList= dropDown.options;

返回下拉选项的数组。因此，只要您知道它们的顺序，就可以通过数组中的索引获取任何顺序。例如那么请给出列表：

<select id="dropDownId" name="cars">
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</select>

此行console.log(optionsList[0]);将返回

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

一旦你拥有了它，你就可以从该项目中获得所需的任何属性，例如id。

这是一个小提琴：http://jsfiddle.net/jxwb4oj6/

Answer 4

<!doctype html>
<html>
  <body>
    <select id="list-1">
      <option id="opt-id-1" name="opt-1" value="val-1">Option 1</option>
      <option id="opt-id-2" name="opt-2" value="val-2">Option 2</option>
      <option id="opt-id-3" name="opt-3" value="val-3">Option 3</option>
    </select>
  </body>

  <script>
    // first option (faster execution)
    var list = document.getElementById('list-1');
    var options = list.options;
    console.log(options[0].id);
    console.log(options[1].id);
    console.log(options[2].id);

    console.log('---');

    // another option (slower execution)
    console.log(document.querySelectorAll('#list-1 option')[2].id);
    console.log(document.querySelectorAll('#list-1 option')[1].id);
    console.log(document.querySelectorAll('#list-1 option')[0].id);
  </script>
</html>

在下拉列表中获取未选择选项的值

4 个答案: