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":""}]

jqueryを使用して、JSON文字列から選択リストにNAMEとIDのみを取得しようとしています。したがって、たとえば、selectは、入力すると次のようになります。

<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

、を使用JSON.parse(data)して、JSON文字列をオブジェクトに変換できます。次に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

このようなもの？？

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=[{"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 に答える