Question

我有一个jQuery selectmenu小部件，有大约30个选项。为了让它更有用，我只展示了最常选的15个选项。然后，我有第16个选项叫做＃34;显示更多＆＃34;。我想要jQuery做的就是显示其他15个选项（低于已经存在的15个选项）。

目前，我有15个显示更多按钮。但是当点击时，它会使selectmenu（弹出窗口）消失（使用＆＃34;显示更多＆＃34;选中）。再次单击该按钮会再次显示所有选项的选择菜单列表。所以，它正在工作，只是它隐藏了选项列表＆＃34;显示更多＆＃34;点击。有没有办法阻止列表消失？我已经加入了event.preventDefault()，但这似乎并没有成功。

基本上，我真正想做的就是显示和隐藏selectmenu小部件的选项。如果有更容易的事情，我很乐意以另一种方式做到这一点！

$(document).ready(function() {
  $('#holderForFamilySelect').on('change', 'select#selectImplantFamily', function(){
    if ($(this).val() == "loadMore") {
        event.preventDefault();
        $("select#selectImplantFamily option.ui-screen-hidden").removeClass("ui-screen-hidden");
        $("select#selectImplantFamily").selectmenu("refresh");
    } else {
        loadImplantsOfFamily($(this).val());
    }
  });
});

Answer 1

您不仅需要防止默认，还需要停止传播（因此点击不会从这一点开始执行任何操作，但是您的代码），如下所示：

$(document).ready(function() {
  $('#holderForFamilySelect').on('change', 'select#selectImplantFamily', function(){
    if ($(this).val() == "loadMore") {
        event.preventDefault();
        event.stopPropagation();
        $("select#selectImplantFamily option.ui-screen-hidden").removeClass("ui-screen-hidden");
        $("select#selectImplantFamily").selectmenu("refresh");
    } else {
        loadImplantsOfFamily($(this).val());
    }
  });
});

显示和隐藏选择菜单选项

1 个答案: