jQuery 绑定 JSON 数组以进行选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18779575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bind JSON Array to select
提问by Rudolf Lamprecht
I am trying to bind a JSON array, which is the result of an Ajax call, to a <select/>element.
我试图将一个 JSON 数组（Ajax 调用的结果）绑定到一个<select/>元素。
A sample of the JSON structure is seen below:
JSON 结构示例如下所示：
[{"JD_No":1,"JD_Name":"Network Administrator"}, {"JD_No":2,"JD_Name":"System Administrator"}]
What I need to achieve is to extract the JD_Novalue and JD_Namevalue of each element and bind them to a html <select/>
我需要实现的是提取每个元素的JD_No值和JD_Name值并将它们绑定到一个html<select/>
I must also state that the JSON Key is dynamic, so referencing a specific Key Name will not be possible.
我还必须声明 JSON 密钥是动态的，因此无法引用特定的密钥名称。
Any help please?
请问有什么帮助吗？
回答by AlexCheuk
in jQuery you can do this:
在 jQuery 中，你可以这样做：
you can check if the value is a type number, if not then it is a name.
您可以检查该值是否是类型编号，如果不是，则它是一个名称。
JSFiddlehere
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);
}
回答by Dart
Try this http://jsfiddle.net/SPMJz/
试试这个http://jsfiddle.net/SPMJz/
HTML
HTML
<select id="select"></select>
Javascript
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);
}
}
回答by FarligOpptreden
If I understand correctly, you want to bind dynamic properties to the select? If you can assume that the list of objects will always be returned with a specific amount of properties in a specific order, you can access the properties based on their INDEX.
如果我理解正确，您想将动态属性绑定到选择吗？如果您可以假设对象列表将始终以特定顺序与特定数量的属性一起返回，则您可以根据它们的 INDEX 访问这些属性。
The following example gets a key and value from an object:
以下示例从对象中获取键和值：
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>");
}
回答by c.P.u1
Based on the assumption that your option's value attribute will always be a number.
基于假设您的选项的 value 属性将始终是一个数字。
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);
});
A jQuery solution:
一个 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);
});
回答by Ohgodwhy
Consider that jsonis the object that array of objects you have in question. Iterate the array, collect each obj, access the keysas you require. Generate an element and store data-attributes equal to the keys in the array.
考虑那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>');
});
回答by iJade
let jsonArraybe your json data, then you can bind the data to a selectelement using the following code
让jsonArray成为您的json数据，然后您可以select使用以下代码将数据绑定到元素
$.each(jsonArray, function (index, item) {
$('#ddl').append($('<option></option>').val(item.JD_No).html(item.JD_Name));
});
