Question

我的HTML页面上有一个select元素。我想用数组填充它。因为我们可以将一个数组作为数据提供者给动作脚本中的comboBox。我做了以下

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)
  )
);

Answer 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>

Answer 3

这是使用数组填充comboBox的最简单方法。

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);

Answer 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]));
}

Answer 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>

Answer 6

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

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

<select id="rec_mode"></select>

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

6 个答案: