2

jquery-chosen jquery-chosenをアプリケーションに統合しようとしています。

2 つの選択コントロールがあります。ユーザーが最初のオプションからオプションを選択すると、 2 番目のコントロールは、最初のオプションから選択された値 (従来のカスケード選択) に従って (jQuery を介して)動的に更新されます。

jquery-chosen を使用したいのは、2 番目の選択コントロールです。

ここに私の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");
    });
});

2 番目のコントロールの 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 を機能させることができないのは、動的に入力された選択 (2 番目のもの) のみです。

jq-chosen ページに記載されているように、トリガー関数を使用しようとしました。

動的に選択されたものを更新する

選択フィールドのオプションを更新する必要があり、Chosen に変更を反映させたい場合は、フィールドで "listzt: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 に答える