Question

我正在尝试使用链式选择（http://www.appelsiini.net/projects/chained）和使用jQuery UI的selectmenu呈现的选择菜单。

我遇到的问题是，在初始UI渲染中选择了一个选项时，它似乎并没有实际更改底层选择菜单，这意味着第二个链式选择不会更新。

我的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（）确实有一个＆＃34;刷新＆＃34; （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没有触发＆＃34;更改＆＃34;选择字段上的事件。

        //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");

        } );

使用jQuery UI selectmenu链式选择

2 个答案: