Javascript jquery选择列表不反映UI中的新项

我试图在单击复选框后使用ajax调用更新选择列表。调用将返回预期的列表项。下面创建的“选项”列表看起来与预期一致。Alert甚至会在distlist中显示要更新的值，但UI根本不反映这一点。原始列表保留为唯一可见项。从功能上看，它的行为就像列表已更新一样

$('#includeHistoricCheckbox').unbind('change').change(function () {
    var historic = false;
    if ($("#includeHistoricCheckbox").is(':checked'))
        historic = true;

    $.post('Search/UpdateDistrictList', { includeHistoric: historic }, function (data) {
        var $distList = $('#districtDropdown');

        var items = "<option value=\" |ALL| \" selected=\"selected\"> (all) </option>";
                $.each(data, function(i, item) {
                    items += "<option value=\"" + item + "\" selected=\"selected\">" + item + "</option>";
                });

        $distList.html(items);

                alert($distList.val());

    });
});

我错过了什么？如何强制刷新此文件？哦，顺便说一下，这是j-query 1.7.1

编辑

---

我错过了我文章中的结束括号。

尝试将代码更改为使用append

$('#includeHistoricCheckbox').unbind('change').change(function () {
    var historic = false;
    if ($("#includeHistoricCheckbox").is(':checked'))
        historic = true;

$.post('Search/UpdateDistrictList', { includeHistoric: historic }, function (data) {
    var $distList = $('#districtDropdown');

    var items = "<option value=\" |ALL| \" selected=\"selected\"> (all) </option>";
            $.each(data, function(i, item) {
                items += "<option value=\"" + item + "\" selected=\"selected\">" + item + "</option>";
            });

    $distList.append(items);//append used instead of .html() function

            alert($distList.val());

});

试试这个：

$('#includeHistoricCheckbox').off('change').on('change', function () {
    var historic = this.checked; // true if checked, false if not
    $.post('Search/UpdateDistrictList', { includeHistoric: historic }, function (data) {
        var $distList = $('#districtDropdown');
        var items = "<option value=\" |ALL| \" selected=\"selected\"> (all) </option>";
        $.each(data, function(i, item) {
             items += "<option value=\"" + item + "\">" + item + "</option>";
        });
        $distList.html(items);
        alert($distList.val());   
    });
}); // <---i think you missed this (closing of change event.)

我发现您可能在发布期间错过了结束，但您可以利用它。checked返回true | | | false on check | | | | |取消选中，您可以更新为on、off而不是unbind。

从列表项中删除selected=\selected\并使用类似的功能

---

使用委托而不是绑定/解除绑定=>jquery。on@Satpal不，我不是。@TimVermaelen好的，这也像预期的那样开火，我这样做有什么收获？我是认真的，预期的结果是什么？selected=\selected\try从每个循环项中删除它。@Jai按照Rohan的回答尝试了。它表明val仍在正确更新，但显示未正确更新。不幸的是，虽然distList.val为空，但仍没有更新UI，这可能是因为没有选定的项目。然后检查控制台中数据变量中的内容。这就是我的意思，警报，或者控制台在您的建议中是一个空列表。如果我在此处保持选中状态，console/alert会显示所需列表，UI不会反映该列表。除非我弄错了，否则追加将添加新项目，我当然想替换旧项目。尽管如此，我仍然尝试追加，但没有用。我尝试更新为开/关。这是一个很好的建议。经过检查，绝对是一个很好的简化。不幸的是，右括号是堆栈溢出复制粘贴错误。

$('#includeHistoricCheckbox').off('change').on('change',function () {
    var historic = this.checked;// use this.checked it will return true/false
    $.post('Search/UpdateDistrictList',{ includeHistoric: historic },function (data){
        var $distList = $('#districtDropdown');
        var items = "<option value=\" |ALL| > (all) </option>";
        $.each(data, function(i, item) {
            items += "<option value=\"" + item + "\" selected=\"selected\">" + item + "</option>";
        });    
        $distList.html(items);    
        alert($distList.val());
    });
});