javascript - 如何清除并重新填充下拉选项

Question

我有两个下拉列表..一个用于员工指定，第二个用于员工。并且我使用了 Jquery Chosen 插件来实现可搜索下拉功能。因为我需要删除所有选项并按选定的指定重新填充下拉列表(员工)。两个下拉列表都使用此插件。但在第一个下拉列表中进行更改后，我无法重新填充第二个下拉列表。从代码隐藏来看，它工作正常。

 $("#DesignationDropdown").change(function () {

        $('#EmployeeDropDown').empty();
        TaskEmployees($("#DesignationDropdown").val());
        var config = {
            '.chosen-select': {},
            '.chosen-select-deselect': { allow_single_deselect: true },
            '.chosen-select-no-single': { disable_search_threshold: 10 },
            '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
            '.chosen-select-width': { width: "95%" }
        }
        for (var selector in config) {
            $('#EmployeeDropDown').chosen(config[selector]);
        }
    });

这是我的功能...

function TaskEmployees(EmpType)
{

     var F = 'SelectEmployees';
        var D = "{'value':'" + EmpType + "'}";
        var C = 'EmployeeDropDown'
        var Temp = "";

    $.ajax({
            type: "POST",
            url: PageUrl + '/' + F,
            data: D,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            cache: false,
            success: function (r) {
                var i;
                var myItem = r.d.split('#');
                $('#' + C).empty();
                var opt = document.createElement('option');
                EmployeeDropDown.options.add(opt);
                opt.value = -1;
                opt.text = "-- Select Employee --";
                for (i = 1; i < myItem.length; i = i + 2) {
                    //Temp = Temp + '<option value="' + myItem[i] + '"">' + myItem[i + 1] + '</option>';
                    var opts = document.createElement('option');
                    EmployeeDropDown.options.add(opts);
                    opts.value = myItem[i];
                    opts.text = myItem[i + 1];
                }
                var config = {
                    '.chosen-select': {},
                    '.chosen-select-deselect': { allow_single_deselect: true },
                    '.chosen-select-no-single': { disable_search_threshold: 10 },
                    '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
                    '.chosen-select-width': { width: "95%" }
                }
                for (var selector in config) {
                    $('#EmployeeDropDown').chosen(config[selector]);
                }
}

Answer 1

通过 jquery 添加元素后需要触发 chosen:updated 来更新所选的下拉列表。

$('#EmployeeDropDown').trigger("chosen:updated");