Question

我有这样的json数据：

[{
        "user_id": "113",
        "employe_first_name": "Asaladauangkitamakan",
        "employe_last_name": "Nasibb"
    }, {
        "user_id": "105",
        "employe_first_name": "Ryan",
        "employe_last_name": "Friday"
    }, {
        "user_id": "87",
        "employe_first_name ":"hendi ",
        "employe_last_name ":"kenther"
    }
]

如何使用javascript（选项value = user_id和text = employe_first_name）“创建”选择选项，在文档就绪时加载，并使用所选值填充另一个字段

Answer 1

var data = [ {"user_id":"113","employe_first_name":"Asaladauangkitamakan","employe_last_name":"Nasibb"}, {"user_id":"105","employe_first_name":"Ryan","employe_last_name":"Friday"},   {"user_id":"87","employe_first_name":"hendi","employe_last_name":"kenther"} ];
var select = document.createElement("select");
for(var i = 0; i < data.length; i++){
    var option = document.createElement("option");
    option.value = data[i].user_id;
    option.innerHTML = data[i].employe_first_name;
    select.appendChild(option);
}
select.addEventListenter("change", function(event) {
    var selected_value = event.target.value;
    document.getElementById("another_field").value = selected_value;
});
someDiv.appendChild(select); // Add the select menu to the DOM

Answer 2

试试这个：

var data = [ {"user_id":"113","employe_first_name":"Asaladauangkitamakan","employe_last_name":"Nasibb"}, {"user_id":"105","employe_first_name":"Ryan","employe_last_name":"Friday"},   {"user_id":"87","employe_first_name":"hendi","employe_last_name":"kenther"} ];
var select = document.createElement("select");
    for(var i = 0; i < data.length; i++){
        var option = document.createElement("option");
        option.value = data[i].user_id;
        option.innerHTML = data[i].employe_first_name;
        select.appendChild(option);
    }

这是DEMO

Answer 3

尝试这样的事情

    //doing on dom ready
    var tid = setInterval( function () {
        if ( document.readyState !== 'complete' ) return;
        clearInterval( tid );       
        var json_len = json.length;
        var select = document.getElementById('select_id');
        for(var i=0;i<json_len;i++){
            var option = document.createElement('option');
            option.innerHTML = json[i].employe_first_name;
            option.value = json[i].user_id;
            select.appendChild(option);
        }
    }, 100 );

参考

Is there a way to check document.ready() if jQuery is not available?

Answer 4

您可以通过这种方式将jQuery用于此目的。

将selectId替换为下拉列表的ID。

 var jsonData = [{
        "user_id": "113",
        "employe_first_name": "Asaladauangkitamakan",
        "employe_last_name": "Nasibb"
    }, {
        "user_id": "105",
        "employe_first_name": "Ryan",
        "employe_last_name": "Friday"
    }, {
        "user_id": "87",
        "employe_first_name": "hendi ",
        "employe_last_name": "kenther"
    }
];
    var ctrlSelect = $("#selectId");
    $(jsonData).each(function() {
        $("<option value='" + this.user_id + "'>" + this.employe_first_name + "</option>").appendTo($(ctrlSelect));
    });

选择更改选项

4 个答案: