1

这是返回的 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":""}]

我希望仅将 JSON 字符串中的 NAME 和 ID 获取到使用 jquery 的选择列表中。因此，例如，填充时选择看起来像这样：

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

对此的任何帮助将不胜感激。谢谢。

4

5 回答 5

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

查看工作演示

根据 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);

查看工作优化的演示

纯粹为了优化主题的完整性，请参阅所有 4 种变体的测试结果，比较单个附加与附加完整集。for loop正如 ankur 指出的那样，偏离路线并附加完整的集合执行速度最快。

jsPerf测试结果

于 2012-08-08T11:55:57.143 回答
0

像这样的东西？？

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

笔记：

您可能已经拥有获取数据部分..而且我没有特别原因使用异步来获取数据....

于 2012-08-08T11:50:06.207 回答
0

如果您的脚本仍然返回 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
}
于 2012-08-08T11:52:58.360 回答
0

您可以使用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));
于 2012-08-08T11:37:39.847 回答
0 
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>')  
 })
于 2012-08-08T11:56:51.777 回答