使用ajax在選擇更改中顯示添加內容

Question

我正在填充基於作爲JSON返回的ajax結果的下拉菜單，它工作正常，除了我想根據選擇哪個選項來顯示帶描述的div。

這裏是JSON

[ 
{ 
    "id": "1", 
    "plan_name": "Plan 1", 
    "description": "subscription something blabla.", 
    "price": "500" 
}, 
{ 
    "id": "2", 
    "plan_name": "Plan 2", 
    "description": "another description", 
    "price": "1000" 
} 
] 

，這裏是我的JS到目前爲止

$(document).ready(function() { 
    $("#plan").one("click", function(event) { 
     $.ajax({ 
      url: ROOT + "retrieve_plan", 
      dataType: "json", 
      success: function(data) { 
       $.each(data, function(id, value) { 
        var opt = $('<option />'); 
        opt.val(value.id); 
        opt.text(value.plan_name); 
        $('#plan').append(opt); 
       }); 
       $('#plan').on('change', function() { 
        $('#description').show(); 
        $('#description').html(value.description); 
       }); 
      } 
     }); 
    }); 
}); 

Answer 1

value在change處理程序的上下文是undefined。您可以使用jQuery data方法來存儲說明：

$.each(data, function(id, value) { 
    var opt = $('<option />'); 
    opt.val(value.id); 
    opt.text(value.plan_name); 
    opt.data('description', value.description); 
    $('#plan').append(opt); 
}); 
$('#plan').on('change', function() { 
    var desc = $('option:selected', this).data('description'); 
    $('#description').show().html(desc); 
});