2

我在我的页面上使用 jQuery Chosen,我想在每次选择新选项时运行一个函数。该函数隐藏div了 parent 中的所有 child 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 的一个问题,特别是因为如果我使用 normalselect代替它可以正常工作(在上面的第 3 步,我会收到一条显示“option2”的警报,就像我应该的那样)。但是正如您所看到的,我正在使用.trigger("liszt:updated")更新selectAJAX 调用何时更改所选选项,所以我不明白为什么这不起作用。

4

1 回答 1

1

事实证明,这是 Chosen 0.9.8(当前版本)中的一个合法错误。我更新到最先进的版本(未正式发布)并且问题自行纠正,没有其他更改。

于 2012-09-27T14:31:50.597 回答