1

我有一个带有大约 30 个选项的 jQuery 选择菜单小部件。为了让它更实用，我只展示了最常用的 15 个选项。然后我有一个名为“显示更多”的第 16 个选项。然后我想要 jQuery 做的是显示其他 15 个选项（低于已经存在的 15 个）。

目前，我用显示更多按钮显示了 15 个。但是当单击时，它会使选择菜单（弹出）消失（选择“显示更多”）。再次单击该按钮会再次显示包含所有选项的选择菜单列表。所以，它正在工作，只是它在单击“显示更多”后隐藏了选项列表。有没有办法防止列表消失？我已经包括event.preventDefault()了，但这似乎并没有奏效。

本质上，我真正想做的就是显示和隐藏选择菜单小部件的选项。如果有更简单的方法，我很乐意用另一种方式来做！

$(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());
    }
  });
});
4

1 回答 1

0

您不仅需要防止默认，还需要停止传播（因此点击从此时起不会做任何事情，而是您的代码），如下所示：

$(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());
    }
  });
});
于 2016-10-05T00:37:55.793 回答