javascript - 我怎样才能给一个数组作为选择元素的选项？

Question

我的 HTML 页面上有一个选择元素。我想用数组填充它。因为我们可以在 ActionScript 中将数组作为数据提供者提供给组合框。我执行以下操作

在 HTML 中...

<table>
  <tr>
    <td>
      <label>Recording Mode:</label>
    </td>
    <td>
      <select id="rec_mode">        
      </select>
    </td>
  </tr>
</table>

在 javascript 中...

var videoSrcArr = new Array("option1", "option2", "option3", "option4", "option5");

当使用 VideoSrcArr 加载页面时，如何填充 rec_mode 元素？谢谢

Answer 1

我强烈建议您使用如下格式:

var options =
[
  {
    "text"  : "Option 1",
    "value" : "Value 1"
  },
  {
    "text"     : "Option 2",
    "value"    : "Value 2",
    "selected" : true
  },
  {
    "text"  : "Option 3",
    "value" : "Value 3"
  }
];

var selectBox = document.getElementById('rec_mode');

for(var i = 0, l = options.length; i < l; i++){
  var option = options[i];
  selectBox.options.add( new Option(option.text, option.value, option.selected) );
}

您不会遇到必须选择默认选项的问题，您可以轻松地动态生成选项数组。

-- 更新--

上述代码的ES6版本:

let optionList = document.getElementById('rec_mode').options;
let options = [
  {
    text: 'Option 1',
    value: 'Value 1'
  },
  {
    text: 'Option 2',
    value: 'Value 2',
    selected: true
  },
  {
    text: 'Option 3',
    value: 'Value 3'
  }
];

options.forEach(option =>
  optionList.add(
    new Option(option.text, option.value, option.selected)
  )
);