26

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

4

6 回答 6

28

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

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)
  )
);
于 2013-01-23T06:19:54.160 回答
7

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

检查这里

<!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>
于 2013-01-23T05:54:44.367 回答
5

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

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);
于 2013-01-23T06:14:45.077 回答
2

你可以这样做：

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]));
}
于 2013-01-23T05:55:08.437 回答
0

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

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>

于 2015-08-03T17:00:44.550 回答
0

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

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

于 2021-03-22T16:33:04.840 回答