1

我正在尝试将一个 JSON 数组（它是 Ajax 调用的结果）绑定到一个<select/>元素。

JSON结构的示例如下所示：

[{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}]

我需要实现的是提取每个元素的JD_No值和JD_Name值并将它们绑定到一个html<select/>

我还必须说明 JSON 密钥是动态的，因此无法引用特定的密钥名称。

请问有什么帮助吗？

4

6 回答 6

3

在 jQuery 中你可以这样做：

您可以检查该值是否为类型号，如果不是，则为名称。

JSFiddle在这里

var jsonString = '[{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}]';

var json_data = JSON.parse(jsonString);

for(var i = 0; i < json_data.length; i++){

    var option = $("<option>");

    for( var key in json_data[i] ){
        // There should only be two keys, if its a number its ID, else option name
        if( typeof json_data[i][key] === "number" ){
            option.attr("value", json_data[i][key]);
        }else{
            option.html(json_data[i][key]);
        }
    }

    $("select").append(option);

}
于 2013-09-13T06:36:42.600 回答
2

试试这个http://jsfiddle.net/SPMJz/

HTML

<select id="select"></select>

Javascript

window.onload = function(){
    var data = [
        {"JD_No":1,"JD_Name":"Network Administrator"},
        {"JD_No":2,"JD_Name":"System Administrator"}
    ];

    populateSelect(data, 'number', 'string');
}

function populateSelect(data, idType, nameType){
    if(!data || !data[0]){
        return;
    }

    var select  = document.getElementById('select');
    var keys    = Object.keys(data[0]);
    var idKey   = typeof(parseInt(keys[0])) == idType   ? keys[0] : keys[1];
    var nameKey = typeof(parseInt(keys[0])) == nameType ? keys[0] : keys[1];

    for(var i = 0; i < data.length; i++){
        var option = document.createElement('option');
        option.value = data[i][idKey];
        option.label = data[i][nameKey];
        select.appendChild(option);
    }
}
于 2013-09-13T07:02:43.200 回答
1

如果我理解正确，您想将动态属性绑定到选择吗？如果您可以假设对象列表将始终以特定顺序返回特定数量的属性，您可以根据它们的 INDEX 访问属性。

以下示例从对象中获取键和值：

for (var i in myArray) {
    var obj = myArray[i];
    var index = 0;
    var key, val;
    for (var prop in obj) {
        switch (index++) {
            case 0:
                key = obj[prop];
                break;
            case 1:
                val = obj[prop];
                break;
            default:
                break;
        }
    }
    $("select").append("<option value=\"" + key + "\">" + val + "</option>");
}
于 2013-09-13T06:41:08.937 回答
1

基于您的期权的价值属性始终是数字的假设。

var json = [{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}];

var options = [], key, value;

json.forEach(function(obj) {
    Object.keys(obj).forEach(function(k) {
        if(typeof obj[k] === "number") {
            key = obj[k];
        }
        else {
            value = obj[k];
        }
    });
    options.push({'key': key, 'value': value}); //or append it directly to select
});

options.forEach(function(option) {
    var option = $('<option>').attr('value', this.key).html(this.value);
    $('#slt').append(option);
});

jsFiddle 演示

一个jQuery解决方案：

$.each(json, function() {
    $.each(this, function(k, v) {
        if(typeof v === 'number') {
            key = v;
        }
        else {
            value = v;
        }
    });
    options.push({'key': key, 'value': value}); ////or append it directly to select
});


$.each(options, function() {
    var option = $('<option>').attr('value', this.key).html(this.value);
    $('#slt').append(option);
});
于 2013-09-13T06:52:33.267 回答
0

考虑这json是您有问题的对象数组的对象。迭代数组，收集每个obj，keys根据需要访问 。生成一个元素并存储data-属性等于keys in the array.

$.each(json, function(i, obj){
    $('body').append('<select data-no="'+obj.JD_No+'" data-name="'+obj.JD_Name+'"></select>');
});
于 2013-09-13T06:32:17.573 回答
0

让成为您的 json 数据，然后您可以使用以下代码jsonArray将数据绑定到元素select

$.each(jsonArray, function (index, item) {
                 $('#ddl').append($('<option></option>').val(item.JD_No).html(item.JD_Name));
             });
于 2013-09-13T06:34:16.237 回答