根据带触发器的下拉选项更新/刷新列表框（“已选择：已更新”）

Question

我有一个Listbox，我需要在用户选择DropdownList中的选项后刷新。

图片不言自明。如果选择部门 - ＆gt;如果在下面的列表框中选择增值税刷新/加载增值税列表，则在列表框中加载离开列表。 （在页面加载时加载默认部门列表）。我目前正在使用trigger("chosen:updated")尝试此操作并且没有运气刷新列表框。这是我的功能代码。

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

    if (document.getElementById('SelectFilter').value == 1) //dropdownlist 
    {   
        //empty listbox         
        $('#SelectItems').empty();

        //append new list to listbox
        $.each(data.Departments, function (index, element) {
            $('#SelectItems').append('<option value="' + element.Value + '">'
                + element.Text + '</option>');
        });

        //refresh
        $('#SelectItems').trigger("chosen:updated");
    }     
    if (document.getElementById('SelectFilter').value == 2)
    {            
        $('#SelectItems').empty();

        $.each(data.VatRates, function (index, element) {
            $('#SelectItems').append('<option value="' + element.Value + '">'
                + element.Text + '</option>');
        });

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

}）;

从下拉列表中识别所选值不是问题，这很好。列表框目前没有使用新选择进行更新/刷新。我无法弄清楚我是不是错了。

Answer 1

尝试将用于创建列表的所有代码放入函数中，然后在选择其中一个选定项目时绑定事件以调用此函数，该函数生成新列表而不是使用.trigger（）。如果您同时提供HTML部分，我很快就会发布示例代码。

Answer 2

我不清楚您是否在识别所选值，填充辅助选择标记或初始加载数据时遇到问题。所以我提供了三个步骤的例子。

首先，要检测所选值，您需要提供.change()处理程序并使用.val()提取所选值。类似的东西：

$("#SelectFilter").change( function() {
  var v = $(this).val();  
  if (v=="value1") {

  } else if (v=="value2") {

  } else {

  } 
});

然后检测到的每个更改都必须刷新辅助选择标记的内容，这很简单......

  $("#SelectItems").empty();
  ['first item','second item','troisième'].forEach( (v,i) => 
    $("#SelectItems").append($("<option>").val("item"+i).text(v))
  );
}

最后触发初始加载应该像触发更改事件一样简单

$("#SelectFilter").change();

我已将所有步骤放在这个小提琴中https://jsfiddle.net/mud9u8yL/6/