Показать и скрыть опции выбора

Question

У меня есть виджет выбора меню jQuery с около 30 вариантов. Чтобы попытаться сделать его более удобным, я показываю только наиболее часто выбираемые 15 вариантов. Затем у меня есть 16-й вариант под названием "Показать больше". Затем я хотел бы, чтобы jQuery отображал остальные 15 опций (ниже уже имеющихся 15).

На данный момент у меня 15 показ с кнопкой показать больше. Но при нажатии, это заставляет selectmenu (всплывающее окно) уходить (с выбранным "Показать больше"). При повторном нажатии кнопки снова открывается список выбора со всеми вариантами. Итак, он работает, просто он скрывает список параметров после нажатия кнопки "Показать больше". Есть ли способ предотвратить исчезновение списка? Я включил 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());
    }
  });
});