Использование прикованных select с jQuery UI selectmenu

Question

Я пытаюсь использовать прикованные selects (http://www.appelsiini.net/projects/chained) с выбранными меню, которые визуализируются с помощью selectmenu jQuery UI.

У меня возникла проблема в том, что, когда опция выбрана в исходном отображенном пользовательском интерфейсе, она, по-видимому, фактически не меняет базовое меню выбора, а это значит, что второй прикованный выбор не обновляется.

JSFiddle здесь: http://jsfiddle.net/5kty2wsa/2

Мои JavaScript:

$("#choose-channel-2").chained('#choose-channel') 
$("#choose-channel").selectmenu(); 
$("#choose-channel-2").selectmenu(); 

Мой HTML:

<select id="choose-channel" name="accounts"> 
    <option value="">Select...</option> 
    <option value="0">Option 1</option> 
    <option value="1">Option 2</option> 
    <option value="2">Option 3</option> 
</select> 
<select id="choose-channel-2" name="searches"> 
    <option value="">Select...</option> 
    <option class="0">Result 1a</option> 
    <option class="0">Result 1b</option> 
    <option class="1">Result 2a</option> 
    <option class="1">Result 2b</option> 
    <option class="2">Result 3a</option> 
    <option class="2">Result 3b</option> 
</select> 

Комментирование две selectmenu Js линии показывает, что прикован выбирает работают, как и ожидалось, не selectmenu ,

Я уверен, что кто-то должен иметь эту проблему раньше, но я изо всех сил пытаюсь найти примеры того, как с этим работать.

Answer 1

У меня такая же проблема, определенно расстраивает. На данный момент, если все вы хотите выглядеть и чувствовать себя в JQuery UI (Fiddle Example):

Отредактируйте CSS:

select { width: 250px; padding: 3px 0px; } 

Редактировать Javascript:

$("select").addClass("ui-selectmenu-button ui-widget ui-state-default ui-corner-all"); 

О .selectmenu ()

У метода .selectmenu() есть метод «refresh» (jQuery UI selectmenu) - какой вид работ; в разложении. Дело в том, что .selectmenu() знает только о доступных опциях выбора после его создания. По мере того, как вы продолжаете обновлять .selectmenu(), он знает все меньше и меньше вариантов, потому что их больше не существует.

.selectmenu() должен повторно инициализировать свою сборку на основе новой выбранной опции. Вот где я нахожусь в тупике. Я попытался несколько вариантов попыток повторной инициализации .selectmenu(), чтобы захватить исходные параметры элемента, чтобы построить новый список, но не смог этого сделать. Вроде так:

//Initialize 
$("#choose-channel-2").chained('#choose-channel'); 
$("select").selectmenu(); 

//Test 1 to refresh only  
$("select").on("selectmenuchange", function(event, ui) { 
    $("#choose-channel-2").chained('#choose-channel'); 
    $(this).selectmenu("refresh"); 
}); 

//Test 2 to destroy and re-initilize 
$("select").on("selectmenuchange", function(event, ui) { 
    $("select").selectmenu("destroy"); 
    $("#choose-channel-2").chained('#choose-channel'); 
    $("select").selectmenu(); 
}); 

Answer 2

Может быть, слишком поздно для вас, но не других. Я понял это. Вы были очень близки к решению. Проблема заключалась в том, что jQueryUI selectmenu не запускал событие «изменения» в поле выбора.

 //Enable chained selects 
     $("#issue").chained("#area"); 

     //Hack: Update select if options change 
     $("select").on("selectmenuchange", function(event, ui) { 

      //Trigger change event on select field so chained menus update 
      $(this).closest("select").trigger("change"); 

      //Refresh all select menus 
      $("select").selectmenu("refresh"); 

     });