如何将数组作为选择元素的选项？答案

【问题标题】：how can I give an array as options to select element?如何将数组作为选择元素的选项？
【发布时间】：2013-01-23 05:43:23
【问题描述】：

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

在 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 元素？谢谢

【问题讨论】：

JavaScript - populate drop down list with array 的可能重复项（以及其他各种问题）。

标签： javascript html

【解决方案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)
  )
);

【讨论】：

如何获取选择值？
如果您想以文本为...项目而值作为索引来执行此操作？
@haykam 您可以，但是您不能指定是否选择了其中之一。如果这不是您的要求的一部分，那没什么大不了的。只需使用一个数组，将值映射到第一个参数，将索引映射到第二个。

【解决方案2】：

我建议使用对象而不是数组，这将非常有帮助，并且符合标准。原因是我们可以通过“键”索引到对象并获得“值”。要显示内容并重置它们，您可以关注此NOTES

CHECK HERE

<!DOCTYPE html>
<html>
<body>
<table>
  <tr>
    <td>
      <label>Recording Mode:</label>
    </td>
    <td>
      <select id="rec_mode">        
      </select>
    </td>
  </tr>
</table>
</body>
<script>
var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C'
};
var select = document.getElementById("rec_mode");
for(index in myobject) {
    select.options[select.options.length] = new Option(myobject[index], index);
}

</script>
</html>

【讨论】：

【解决方案3】：

这是用数组填充组合框的最简单方法。

var j = new Array("option1","option2","option3","option4","option5"),    
var options = '';

for (var i = 0; i < j.length; i++) {
   options += '<option value="' + j[i]+ '">' + j[i] + '</option>';
}
$("#rec_mode").html(options);

【讨论】：

【解决方案4】：

你可以这样做：

var videoSrcArr = new Array("option1","option2","option3","option4","option5"),
    selectEl = document.getElementById('rec_mode');


for(var i = 0; i < videoSrcArr.length; i++){
    selectEl.options.add(new Option(videoSrcArr[i], videoSrcArr[i]));
}

【讨论】：

——使用数组字面量比使用数组构造函数更好，因为它的类型更少，也不太可能做意想不到的事情（例如new Array(9) vs [9]。

【解决方案5】：

这是在组合框中获取数组值的最佳方式

var states = new Array();
states['India'] = new Array('Andhra Pradesh','Arunachal Pradesh','Assam','Bihar','Chhattisgarh','Goa','Gujarat','Haryana','Himachal Pradesh','Jammu and Kashmir','Jharkhand','Karnataka','Kerala','Madhya Pradesh','Maharashtra','Manipur','Meghalaya','Mizoram','Nagaland','Odisha','Punjab','Rajasthan','Sikkim','Tamil Nadu','Telangana','Tripura','Uttar Pradesh','Uttarakhand','WestBengal','Andaman and Nicobar Islands','Chandigarh','Dadra and Nagar Haveli','Daman and Diu','Lakshadweep','Puducherry'); 

function setStates() {
	var newOptions=states['India'];
	var newValues=states['India'];
	selectField = document.getElementById("state");
	selectField.options.length = 0;
	for (i=0; i<newOptions.length; i++) 
	{
	selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
	}
}

<body  onload="setStates();"
<label>State :</label>
<select style="width:auto;" name="state" id="state">
<option value="">Please select a Country</option>
</select><br>

【讨论】：

【解决方案6】：

使用模板文字的现代解决方案：

["option1", "option2", "option3", "option4", "option5"]
.forEach(op => rec_mode.innerHTML += `<option value="${op}">${op}</option>`);

&lt;select id="rec_mode"&gt;&lt;/select&gt;

【讨论】：