How to populate a drop down list in HTML5 using javascript?

Question

I want to fetch data from web service, and populate that into a drop down list. My code is as given below. A drop down is created but data cannot be populated. Please suggest me with some code.

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

According to https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement drop.add expects an HTMLElement, not a string of text.

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