Показать и скрыть параметры selectmenu

Question

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

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