Блог

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

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

Вам нужно не только предотвратить дефолт, но и остановить распространение (чтобы щелчок не делал ничего с этого момента, кроме вашего кода), например:

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