如何清除和重新填充下拉选项

您需要触发 selected:updated在通过jquery添加元素后更新所选下拉列表。

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

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

}

试试这个，

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
}