Я использую jQuery Chosen на своей странице и хочу запускать функцию каждый раз, когда появляется новая опция. выбрано. Функция скрывает все дочерние div
в родительском div
, а затем показывает только тот, который соответствует выбранному варианту.
HTML:
<select id="settings-select" data-placeholder="Choose…" 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, выбор ранее выбранной опции больше не запускает событие изменения. Например:
- Выберите «Вариант 2»: отображается предупреждение «Вариант 2».
- Выполнить вызов AJAX: по завершении выбирает «Вариант 1» и отображает предупреждение «Вариант 1».
- Выберите «Вариант 2»: ничего не происходит
Я знаю, что это проблема именно с Chosen, потому что он отлично работает, если вместо этого я использую обычный select
(на шаге 3 выше я получу предупреждение с надписью «option2», как и должно быть). Но, как видите, я использую .trigger("liszt:updated")
для обновления select
, когда вызов AJAX изменяет выбранную опцию, поэтому я не понимаю, почему это не работает.