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

Question

我正在尝试将 jquery-chosen 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>

我注意到在静态填充的选择上使用 jquery-chosen 效果很好。只有我的动态填充选择（第二个）我无法让 jquery-chosen 工作。

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

动态更新选择

如果您需要更新您的选项 选择字段并希望选择来获取更改，您需要 触发字段上的“listzt:updated”事件。选择将重建 本身基于更新的内容。

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

编辑：我还必须提到，当页面加载时，所选控件只是呈现为纯 html 多选。

Answer 1

我将选择控件更改为：

<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");

问题就解决了。