如何使用JavaScript在HTML5中填充下拉列表？

Question

我想從Web服務中獲取數據，並將其填充到一個下拉列表中。 我的代碼如下。 將創建一個下拉列表，但無法填充數據。 請給我一些代碼。

function jsondata(data)
    {
        alert("JSONdata");
        var parsedata=JSON.parse(JSON.stringify(data));
        var captain_details=parsedata["Captain Details"];

        var drop_down=document.getElementById("captainlist");
        var drop=document.createElement("select");

        for(var i=0;i<captain_details.length;i++)
        {
             var captain = captain_details[i];
             captain_name=captain['Captain Name'];

             alert(captain_name);   

             document.getElementById("captainlist").appendChild(drop);
             drop.add(captain_name,null);
        }
    }

Answer 1

在這種情況下， drop是<select>節點而不是<option>節點-> document.getElementById("captainlist").appendChild(drop); 您應該創建<option>節點，設置其值和文本並將其添加到<select>元素中。 我假設var drop_down=document.getElementById("captainlist"); 指向<select>節點

Answer 2

根據https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLSelectElement的要求 drop.add需要HTMLElement，而不是文本字符串。

http://jsfiddle.net/vPUmX/

var data = [
    { name: "Mal Reynolds" },
    { name: "Piet Heyn" },
    { name: "Jean-Luc Picard" }
];

var elm = document.getElementById("captains"); // elm is a <select> element

for (var i = 0, len = data.length; i < len; i++) {
    var name = data[i].name;

    // create an option element
    var option = document.createElement("option");
    option.value = i;
    option.textContent = name;

    // add option
    elm.add(option);
}