Prevent selectmenu widget from closing

Question

I have a selectmenu widget with a bunch of options. I'd like to add a "show more" button as the last option which would then either load in more options and refresh the widget or just toggle their visibility to show them if they had already been loaded in but were not visible (either method would be ok, I don't mind).

The problem is that click on the "show more" option then closes the select menu itself! There must be a work around for this, as allowing multiple options to be selected doesn't close the widget when you click on it.

Any ideas?

Answer 1

yes, disabled option could be helpfull

But first give it an id, something like:

 <option id="other" disabled style="color: black; text-align: center;">Other choices</option>

then the js part ( with jQuery):

function goToOther(){
    var url = "http://qwant.com";
    window.location = url;
}


$( document ).ready(function() {
    $('#other').on('click', function(){
       goToOther();
    });
});

Answer 2

Set data-native-menu to true and enhance the menu jqm style with css, something like:

 .fakeList{background-clip: padding-box; background-color: rgb(246, 246, 246); border-bottom-color: rgb(221, 221, 221); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px; color: rgb(51, 51, 51); cursor: pointer; display: block; font-family: sans-serif; font-size: 16px; font-weight: 700; line-height: 20.8px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; opacity: 1; overflow: hidden; overflow-x: hidden; overflow-y: hidden; padding-bottom: 11.2px; padding-left: 16px; padding-right: 40px; padding-top: 11.2px; position: relative; text-align: center; text-decoration: none; text-decoration-color: rgb(51, 51, 51); text-decoration-line: none; text-decoration-style: solid; text-overflow: ellipsis; text-shadow: rgb(243, 243, 243) 0px 1px 0px; white-space: nowrap; -moz-user-select: none; } 

then in the js :

 $( document ).ready(function() { $('option').addClass('fakeList'); $('#showMore').on('click', function(){ alert("do show more"); }); });