Question

我有两个下拉列表..One for Employee Desiganation和Second For Employee.And我使用Jquery Chosen插件进行Searchable Dropdown功能。因为我需要删除所有选项并重新填充下拉列表（Employee）作为选定的名称。使用此插件下载列表。但是我无法重新填充在First Dropdown中进行更改后的第二个下拉列表。从代码背后它的工作正常。

 $("#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添加元素后触发选择：更新以更新所选的下拉列表。

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

Answer 2

1）代替empty（）函数使用如下：

    $("#DesignationDropdown").change(function () {
    //$('#EmployeeDropDown').empty();
      $('#EmployeeDropDown').find('option').remove();
    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 3

试试这个，

var config = {// global 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%" }
}
$("#DesignationDropdown").change(function () {
    var $employee = $('#EmployeeDropDown');
    TaskEmployees(this.value);// this.value

    if($('#EmployeeDropDown option').length) {// check the length of employees
       for (var selector in config) {
          $employee.chosen(config[selector]);
       }
    }
});


function TaskEmployees(EmpType) {
    var F = 'SelectEmployees',
        D = { "value" : EmpType},
        C = 'EmployeeDropDown',
        Temp = "";

    $.ajax({
        type: "POST",
        url: PageUrl + '/' + F,// Note PageUrl must be previously defined
        data: D,
        dataType: "json",
        success: function (r) {
              var myItem = r.d.split('#');
              var str='';
              for (i = 1; i < myItem.length; i = i + 2) {
                 str+='<option value="'+myItem[i]+'"">'+myItem[i+1]+'</option>';
              }
              $('#'+C).html('<option value="-1">-- Select Employee --</option>')
                      .append(str);
        }

    });// closing ajax function
}

如何清除和重新填充DropDown选项

3 个答案: