2

我正在尝试将 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 页面中记录的触发功能：

动态更新选择

如果您需要更新您的选择字段中的选项并希望 Chosen 获取更改，您需要在该字段上触发“liszt:updated”事件。选择将根据更新的内容重新构建自己。

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

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

4

1 回答 1

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

问题消失了。

于 2012-11-13T12:42:21.953 回答