このJSONレスポンスをドロップダウンリストに入れる方法

Question

私はこのデータをサーバからドロップダウンリストに戻そうとしていますが、各オブジェクト名はランダムIDで始まるので、どのように行うのかわかりません。

$("#CampaignOpenActionSubscriber_campaign_id").change(function() { 
    var el = $(this); 

    $.ajax({ 
    type: 'POST', 
    url: "Dropdownlist", 
    data: 'csrf_token=' + $('meta[name=csrf-token-value]').attr('content') +'&Selectedcampaign_id=' + el.val(), 
    success: function (response) { 
     var jsonResponse = $.parseJSON(response); 
     for(var i=0; i< jsonResponse.length; i++){ 
     $("#selectCourse").append(
      $('<option>').text(jsonResponse[i]).val(jsonResponse[i]) 
     );    
     } 
    } 
    }); 
}); 

、これは...私は戻って私のJSON応答から得るものです：：これは私がここでやろうとしていますものです

{288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"} 

私はドロップダウンリストにこれを置くだろうか？

Answer 1

これを達成するには、for.. inループを使用して、AJAX呼び出しから返されたオブジェクトのキーを反復処理する必要があります。これを試してみてください：

var jsonResponse = { 
 
    288878: "FOO", 
 
    288881: "BAZZ", 
 
    288882: "YOLLO" 
 
} 
 

 
var html = ''; 
 
for (var key in jsonResponse) { 
 
    html += '<option value="' + key + '">' + jsonResponse[key] + '</option>'; 
 
} 
 
$("#selectCourse").append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="selectCourse"></select>

はまた、JSONが検出されたときにjQueryのあなたのための応答をdeserialiseますよう JSON.parse()があなたのAJAX successハンドラ内で冗長であることに注意してください。これが自動的に起こらない場合は、オプションに dataType: 'json'を追加するだけでよいでしょう。

Answer 2

使用あなたがjsonResponseオブジェクトをループjQuery.each()を使用してjQuery.append()を持つすべてのオプションの選択を取り込むことができます

var options = ''; 
for(var key in jsonResponse){ 
    options += '<option value ="key">' + jsonResponse[key] +'</option> 
}; 
$("#selectCourse").html(options) 

Answer 3

for ... inループ。

コード：

var $select = $('#selectCourse'), 
 
    jsonResponse = {288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"}; 
 

 
$.each(jsonResponse, function(key, value) { 
 
    $select.append('<option value=' + key + '>' + value + '</option>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="selectCourse"> 
 
    <option value="">Select...</option> 
 
</select>

Answer 4

オブジェクト

var data = {288878: "FOO", 288881: "BAZZ", 288882: "YOLLO"}; 
 

 
$.each(data, function(prop, val){ 
 
    $('select').append($('<option>',{text:val, value:prop})) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select></select>