Javascript使用数组填充选择选项

时间:2014-11-11 05:05:16

标签: javascript html arrays select

我的代码不会填充任何内容,只会将选择菜单留空。

这是我的HTML

<select id="parent" onChange="displayExample();"></select>

这是我的Javascript

/* array of option values */
var POPULATING_ARRAY = [ "Item 1", "Item 2", "Item 3" ];
var parent = document.getElementById("namedOfSelect");

for ( var pos = 0; pos < POPULATING_ARRAY.length; pos++)
{
    //create an <option> to add the <select>
    var child = document.createElement("option");

    //assign values to the <option>
    child.textContent = POPULATING_ARRAY[pos]
    child.value = pos;

    //attach the mew <option> to the <selection>
    parent.appendChild(child);
}

function displayExample()
{
    var current = document.getElementById("parent");
    var op = parseInt(current.value);
    document.getElementById("helpMsg").innerText = EXAMPLES[op];    
}

代码应该以编程方式将选项添加到JavaScript的选择中。

4 个答案:

答案 0 :(得分:2)

您在Javascript第二行中提到的ID是错误的。

将其更改为:

var parent = document.getElementById("parent");

Working Demo

答案 1 :(得分:2)

window.onload = (function(){
  addOptions();
})(); 
function addOptions(){
  var items = [ "Item 1", "Item 2", "Item 3" ];                 
  for (i = items.length - 1; i >= 0; i--){
    var x = document.getElementById("parent");
    var option = document.createElement("option");
    option.text = items[i];
    x.add(option,x[0]);
  }
} 

答案 2 :(得分:0)

Replace the "namedOfSelect" by you select Id "parent"

Here is the working

Demo

答案 3 :(得分:0)

为什么你必须从javascript中获取值,你可以直接从html中使用

<select id="parent" onChange="displayExample();">
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
</select>