Question

这是返回的JSON数据：

[{"ENERGYUSE":"","EMISSIONFACTOR":2.332,"NAME":"Coal","ID":812,"UNITOFMEASURE":"Metric tons"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002705,"NAME":"Diesel","ID":816,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":26635048.359808,"EMISSIONFACTOR":0.0005703,"NAME":"Electricity","ID":811,"UNITOFMEASURE":"KWH"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002705,"NAME":"Fuel Oil","ID":814,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002328,"NAME":"Gasoline","ID":815,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002603,"NAME":"Jet Fuel","ID":818,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.00269,"NAME":"Kerosene","ID":817,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.001509,"NAME":"LPG\/Propane","ID":813,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":523846.2564,"EMISSIONFACTOR":0.05307,"NAME":"Natural Gas","ID":810,"UNITOFMEASURE":"million BTU"},{"ENERGYUSE":"","EMISSIONFACTOR":0.285618,"NAME":"Wood","ID":819,"UNITOFMEASURE":"Kilograms"},{"ENERGYUSE":"","EMISSIONFACTOR":"","NAME":"Other","ID":808,"UNITOFMEASURE":""}]

我希望只使用jquery将JSON字符串中的NAME和ID转换为选择列表。例如，当填充时，select会看起来像这样：

<select id="EnergyList" name="EnergyList">
 <option value="813">Nataural Gas</option>
 <option value="812">Coal</option>
  etc etc...
</select>

任何有关这方面的帮助都会受到很大的限制.Thankyou。

Answer 1

使用jQuery，您可以根据解析的json源动态附加选项。

var items = JSON.parse(jsonSource);

var $selectElement = $("#EnergyList");

$(items).each(function(){
    var newOption = '<option value="' + this.ID + '">' + this.NAME + '</option>';
    $selectElement.append(newOption);
});

见工作DEMO

根据ankur对优化的评论，请参见下面更优化的版本：

var items = JSON.parse(jsonSource);

var $selectElement = $("#EnergyList");
var newOptions = '';

for(index = 0; index < items.length; index++)
{
    newOptions += '<option value="' + items[index].ID + '">' + items[index].NAME + '</option>';
}

$selectElement.append(newOptions);

请参阅优化DEMO

纯粹为了优化主题的完整性，请参阅所有4种变体的测试结果，比较每个和每个附加vs与附加完整集的比较。偏离课程for loop并将完整的集合附加为ankur指出执行速度最快。

jsPerf Test-Results

Answer 2

您可以使用JSON.parse(data)将JSON字符串转换为Object。然后JsonObj.Name，JsonObj.ID或您需要的任何内容，都可以从对象中获取。

代码

var jsonObj = JSON.parse(yourJson);
var optionTemplate = '<option value = "@@ID@@">@@NAME@@</option>';
var finalTemplate = '';
$.each(jsonObj, function(){
    tmp = optionTemplate;
    tmp = tmp.replace("@@NAME@@",this.NAME).replace("@@ID@@",this.ID);
    finalTemplate += tmp;
});
finalTemplate = '<select id = "EnergyList" name = "EnergyList">' + finalTemplate + '</select>';
console.log($(finalTemplate));

Answer 3

这样的东西？

var Url = "/feedpage.aspx";
var jsonObjectInstance = $.parseJSON(
    $.ajax({
         url: Url,
         async: false,
         dataType: 'json'
        }
    ).responseText
);
var str ='<select id="EnergyList" name="EnergyList">';



for (var i = 0; i < jsonObjectInstance.length; i++) {
 str += '<option value="'+jsonObjectInstance[i].ID+'">'+jsonObjectInstance[i].NAME+'</option>'; 
}
str+='</select>';
$("#divToInsertIn").html(str);

注意：

你可能已经有了获取日期部分..而且我已经使用异步来获取数据而没有特别的原因....

Answer 4

如果您的脚本仍然返回JSON数据，您可以让jQuery直接为您解析它：

$.getJSON({
    url: yourAjaxUrl,
    data: yourData,
    success: function(jsonData) {
        insertOpts(jsonData);
    }
});

var insertOpts = function(data) {
    var $select = $('yourSelect').clone(true); // clone the select box
    $.each(data, function(i, obj) { // generate all the options temporarily in jQuery
        var $option = $select.append('<option />');
        $option.val(obj.ID).text(obj.NAME);
    });
    $('yourSelect').replaceWith($select); // replace the existing select with its manipulated clone
}

Answer 5

json=[{"ENERGYUSE":"","EMISSIONFACTOR":2.332,"NAME":"Coal","ID":812,"UNITOFMEASURE":"Metric tons"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002705,"NAME":"Diesel","ID":816,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":26635048.359808,"EMISSIONFACTOR":0.0005703,"NAME":"Electricity","ID":811,"UNITOFMEASURE":"KWH"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002705,"NAME":"Fuel Oil","ID":814,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002328,"NAME":"Gasoline","ID":815,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.002603,"NAME":"Jet Fuel","ID":818,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.00269,"NAME":"Kerosene","ID":817,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":"","EMISSIONFACTOR":0.001509,"NAME":"LPG\/Propane","ID":813,"UNITOFMEASURE":"Liters"},{"ENERGYUSE":523846.2564,"EMISSIONFACTOR":0.05307,"NAME":"Natural Gas","ID":810,"UNITOFMEASURE":"million BTU"},{"ENERGYUSE":"","EMISSIONFACTOR":0.285618,"NAME":"Wood","ID":819,"UNITOFMEASURE":"Kilograms"},{"ENERGYUSE":"","EMISSIONFACTOR":"","NAME":"Other","ID":808,"UNITOFMEASURE":""}]
 $("#EnergyList").empty()
 $.each(json,function(i,o),function(){
   $("#EnergyList").append('<option value="'+o.ID+'">'+o.NAME+'</option>')  
 })

JSON数据只选择列表中的特定键

5 个答案: