Question

我正在尝试从另一个下拉列表中填充下拉菜单。

这发生在首次下拉列表的onChange事件中，但是当我从下拉列表1中选择其中一个选项然后它执行getJson并且它返回JSON中的正确值时出现问题，但问题是即使我选择相同的值，每次都会填充该下拉列表。

以下是代码：

$.getJSON("ajax.php", 
    { m: "modules/json/json-get-category",
      r: $('#id_project').has('option').val()
    }, 
    function(data){
        var html = '';
        var len = data.length;
        alert(len);
        //$('#id_category').val('').trigger('chosen:updated');
        for (var i = 0; i< len; i++) {
            html += '<option value="' + data[i].id + '">' + data[i].catName + '</option>';
        }
        $('#id_category').append(html);
});

返回JSON：

[
    {"id":"27","catName":"Hardware support"},
    {"id":"29","catName":"test"}
]

dropdown1在第一次onChange事件中具有正确的值，但在它开始重复值之后：

示例：我有2个硬件支持，2个测试......它只是添加它。

Answer 1

在功能开始时，删除现有选项

$('#id_category').empty();

Answer 2

在添加新选项之前，您需要删除所有选项。在for循环之前，添加以下内容：

$("#id_category").find("option").remove();

这应删除当前项目并为新项目腾出空间。

使用JSON和jQuery填充下拉列表

2 个答案: