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

使用ajax在选择更改时在div中显示添加内容

1 个答案: