JavaScript - 用数组填充下拉列表
JavaScript - populate drop down list with array
我在脚本中声明了一个数组:
var myArray = new Array("1", "2", "3", "4", "5" . . . . . "N");
我有一个包含下拉菜单的表单:
<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
</select>
</form>
使用 Javascript,我将如何使用数组值填充下拉菜单的其余部分? 因此,选项将是"选择一个数字","1","2","3","4","5" . . ."N"?
您需要遍历数组元素,为每个元素创建一个新的 DOM 节点并将其附加到您的对象中:
var select = document.getElementById("selectNumber");
var options = ["1", "2", "3", "4", "5"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
<select id="selectNumber">
<option>Choose a number</option>
</select>
你也可以
用jQuery来做到这一点:
var options = ["1", "2", "3", "4", "5"];
$('#select').empty();
$.each(options, function(i, p) {
$('#select').append($('<option></option>').val(p).html(p));
});
我使用了Alex Turpin的解决方案,并进行了如下所述的小更正:
var select = document.getElementById("selectNumber");
var options = ["1", "2", "3", "4", "5"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.text = opt;
el.value = opt;
select.add(el);
}
更正,因为使用 appendChild()
函数,它在 DOM 准备时加载。所以它在旧的(8 个或更低(IE 版本中不起作用。因此,通过更正,它工作正常。
关于add()
和appendChild()
之间差异的一些说明。
我发现这也有效...
var select = document.getElementById("selectNumber");
var options = ["1", "2", "3", "4", "5"];
// Optional: Clear all existing options first:
select.innerHTML = "";
// Populate list with options:
for(var i = 0; i < options.length; i++) {
var opt = options[i];
select.innerHTML += "<option value='"" + opt + "'">" + opt + "</option>";
}
您将首先从 DOM 获取下拉元素,然后遍历数组,并将每个元素作为新选项添加到下拉列表中,如下所示:
var myArray = new Array("1", "2", "3", "4", "5");
// Get dropdown element from DOM
var dropdown = document.getElementById("selectNumber");
// Loop through the array
for (var i = 0; i < myArray.length; ++i) {
// Append the element to the end of Array list
dropdown[dropdown.length] = new Option(myArray[i], myArray[i]);
}
<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
</select>
</form>
这假设你没有使用JQuery,并且你只有基本的DOM API可以使用。
这样的事情应该可以工作:
var dropdown = document.getElementById("dropdown1");
if (dropdown) {
for (var i=0; i < month.length;++i){
addOption(dropdown, month[i], month[i]);
}
}
addOption = function(selectbox, text, value) {
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
您可以参考本文了解更多详细信息:
http://www.plus2net.com/javascript_tutorial/list-adding.php
["1","2","3","4"].forEach( function(item) {
const optionObj = document.createElement("option");
optionObj.textContent = item;
document.getElementById("myselect").appendChild(optionObj);
});
这是我的答案:
var options = ["1", "2", "3", "4", "5"];
for(m = 0 ; m <= options.length-1; m++){
var opt= document.createElement("OPTION");
opt.text = options[m];
opt.value = (m+1);
if(options[m] == "5"){
opt.selected = true;}
document.getElementById("selectNum").options.add(opt);}
使用模板文字是:
const arr = [1,2,3,4]
var options = arr.map(e=>{return `<option value="${e}">${e}</option>`})
document.getElementById("selectNumber").innerHTML = options.join('')
//document.getElementById("selectNumber").insertAdjacentHTML("beforeend", options);
<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
</select>
</form>
var test = document.getElementById("TestOption");
var arr = ["A","B","C","D"];
//remove options if necessary
for(var i=test.options.length- 1;i>= 0;i--) {test.remove(i);}
//add new options
for(i in arr) {test.add(new Option(arr[i],i));}
如果你正在使用 React 和 JSX,你可以使用 map 函数。然后,您无需手动添加 DOM 节点。
const numsarray = [1, 2, 3, 4, 5];
您可以将其映射到您的<options>
标签中(在<select>
内(
<select>
{numsarray.map((num) => (
<option>{numsarray}</option>
))}
</select>
var list =["muez","devomech","solution"]
var option = "";
for(var i=0; i<list.length; i++){
option+= '<option value="'+ list[i] +'">' + list[i] + "</option>"
}
document.getElementById("deviceoption").innerHTML = option;
<select id="deviceoption"></select>
'
<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
<script>
var myArray = new Array("1", "2", "3", "4", "5" . . . . . "N");
for(i=0; i<myArray.length; i++) {
document.write('<option value="' + myArray[i] +'">' + myArray[i] + '</option>');
}
</script>
</select>
</form>
简单的jQuery解决方案,易于调试:
<form id="myForm">
<select id="selectNumber">
<option>Choose a number</option>
</select>
</form>
<script>
var myArray = ["1", "2", "3", "4", "5"];
for (let i = 0; i < myArray.length; i++) {
$("#selectNumber").append("<option value='" + myArray[i] + "'>" + myArray[i] + "</option>");
}
</script>
相关文章:
- 无法使用国家/地区选择中的状态动态填充下拉列表
- 通过使用AngularJs进行分组来填充下拉列表
- 如何填充下拉列表,从javascript中的另一个下拉列表中排除任何一个选项
- 使用 MySQL 条目填充下拉列表
- 如何使用其他下拉列表中未选择的选项填充下拉列表
- 使用jquery动态填充下拉列表
- 在AngularJS中动态填充下拉列表
- 使用数据库返回的数据动态填充下拉列表
- 设置 AJAX 调用和填充下拉列表
- 使用 ajax 和 JSP Servlet 根据选择的上一个下拉列表填充下拉列表
- 在 JavaScript 中使用 MySQL 数据库中的数据填充下拉列表
- 如何在 jQuery 中用 JSON 数据填充下拉列表作为 ajax 响应
- 使用 ajax 用 SQL 填充下拉列表
- 如何使用 JavaScript 中的值填充下拉列表
- 如何在信息窗口中填充下拉列表(谷歌地图API v3)
- 从 Javascript 和 Java 返回的数组中填充下拉列表
- 使用 AJAX 和 ORACLE 以及不使用 php 填充下拉列表(选择 )
- 单击第一项时重新填充下拉列表
- 尝试使用 jquery 和 ajax 填充下拉列表
- 如何使用 javascript 清空下拉列表后重新填充下拉列表