2

私は自分のページで jQuery Chosenを使用しており、新しいオプションが選択されるたびに関数を実行したいと考えています。この関数は、すべての子divを親divで非表示にし、選択されたオプションに対応するものだけを表示します。

HTML:

<select id="settings-select" data-placeholder="Choose&hellip;" class="chzn-select">
    <option value="setting1">Option 1</option>
    <option value="setting2">Option 2</option>
    <option value="setting3">Option 3</option>
    <option value="setting4">Option 4</option>
    <option value="setting5">Option 5</option>
    <option value="setting6">Option 6</option>
</select>

<div id="settings-tabs">
    <div id="setting1" class="tab">...</div>
    <div id="setting2" class="tab">...</div>
    <div id="setting3" class="tab">...</div>
    <div id="setting4" class="tab">...</div>
    <div id="setting5" class="tab">...</div>
    <div id="setting6" class="tab">...</div>
</div>

JS:

var settingsShow = function(){
    var showPanel = $("#settings-select").find('option:selected').val();
    $("#settings-tabs .tab").hide();
    $("#" + showPanel).fadeIn("fast");
    alert(showPanel);
}

$(document).ready(function(){
    $("#settings-tabs .tab").hide();
    $("#settings-select").chosen().change(settingsShow);
});

選択した項目が変更されると、settingsShowが呼び出されます (これを確認するためだけにアラートが表示されます)。

ここで、完了時に選択したオプションを変更する AJAX 呼び出しもあります。

$("#settings-select").val("setting1").trigger("liszt:updated");
settingsShow();

ここに問題があります。選択されたオプションが完了した AJAX 呼び出しによって変更されると、以前に選択されたオプションを選択しても、変更イベントが発生しなくなります。例えば：

  1. 「オプション 2」を選択: アラート「オプション 2」を表示します。
  2. AJAX 呼び出しの実行: 完了時に「オプション 1」を選択し、アラート「オプション 1」を表示します。
  3. 「オプション 2」を選択: 何も起こらない

代わりに法線を使用すると問題なく動作するため、Chosen の問題であることはわかっていますselect(上記の手順 3 で、必要に応じて「option2」というアラートが表示されます)。しかし、ご覧のとおり、AJAX 呼び出しで選択したオプションが変更され.trigger("liszt:updated")たときに を更新するために使用してselectいるため、これが機能しない理由がわかりません。

4

1 に答える 1

1

これは、Chosen 0.9.8 (現在のリリース バージョン) の正当なバグであることが判明しました。最新バージョン(公式にはリリースされていません)に更新したところ、問題は修正されましたが、他の変更はありませんでした。

于 2012-09-27T14:31:50.597 に答える