Question

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

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

我希望使用jquery选择的第二个选择控件。

这是我的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选择正常。只有我动态填充的选择（第二个）才能让jquery选择工作。

我尝试使用jq选择页面中记录的触发器功能：

动态更新动态

如果您需要更新您的选项   选择字段并希望选择选择更改，您需要   触发该字段上的“liszt：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");

问题已经消失。

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

1 个答案: