Show and hide selectmenu options

Question

I have a jQuery selectmenu widget with about 30 options. To try and make it more usable, I'm only showing the most commonly selected 15 options. I then have a 16th option called "Show more". What I'd like jQuery to do is then display the other 15 options (below the 15 already present).

At the moment, I have the 15 showing with the show more button. But when clicked, it makes the selectmenu (popup) go away (with "Show more" selected). Clicking the button again brings up the selectmenu list again with all of the options. So, it's working, it's just that it hides the list of options after "show more" is clicked. Is there a way to prevent the list from going away? I have included event.preventDefault(), but that doesn't seem to be doing the trick.

Essentially, all I really want to do is show and hide options of a selectmenu widget. I'm happy to do it another way if there's something easier!

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

Aschab Aschab · Accepted Answer · 2016-10-05T00:37:55

You need not only to prevent default but also to stop propagation (so the click doesnt do anything from this point but your code), like this:

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

Show and hide selectmenu options

1 Answers