jquery - 在通过javascript填充的表单选择上使用jQuery选择

我正在尝试将jquery选择的jquery-chosen集成到我的应用程序中。

我有两个选择控件：当用户从第一个选择一个选项时，第二个将根据从第一个选择的值（通过经典级联选择）动态更新（通过jQuery）。

我希望在第二个选择控件中使用jquery-chosen。

这是我的js：

$(document).ready(function() {
    $(".chzn-select").chosen();
});

$(document).ready(function() {
    var geolocationRegionSelect = $("#geolocationRegionSelect");//first select control
    geolocationRegionSelect.bind('change', function(event) {
        $.get("/kadjoukor/geolocations/findDepartmentsByRegion?regionId="+$(this).val(), function(result){
            console.log(result);
            var geolocationDepartmentSelect = $("#geolocationDepartmentSelect");//second select control
            geolocationDepartmentSelect.empty();
            $.each(result, function() {
                geolocationDepartmentSelect.append($("<option />").val(this.id).text(this.department));
            });
        }, 'json');
        $("#geolocationDepartmentSelect").trigger("liszt:updated");
    });
});

这是第二个控件的html：

    <div class="controls">
        <select id="geolocationDepartmentSelect"  data-placeholder="Choose a department" multiple="multiple" class="chzn-select chzn-done"></select>
    </div>

我注意到在静态填充的select上使用jquery-chosen可以正常工作。只有使用动态填充的select（第二个选择），我才能让jquery选择工作。

我尝试使用jq-chosen页面中记录的触发函数：


动态更新选择

如果您需要更新您的选项
选择字段并希望选择进行更改，您需要
在该字段上触发“ liszt：updated”事件。选择将重建
本身基于更新的内容。


不幸的是，它对我不起作用...

编辑：我还必须提到，加载页面时，所选控件仅呈现为纯HTML多重选择。

最佳答案

我将选择控件更改为：

<select id="geolocationDepartmentSelect"  data-placeholder="Choose a department" multiple="multiple" class="chzn-select"></select>

和js到：

$(".chzn-select").chosen({no_results_text: "No results matched"});

和

$(".chzn-select").trigger("liszt:updated");

问题就解决了。