防止選擇菜單小部件關閉

Question

我有一個帶有許多選項的selectmenu小部件。 我想添加“顯示更多”按鈕作為最后一個選項，然后將其加載更多選項並刷新小部件，或者僅切換其可見性以顯示它們是否已被加載但不可見（兩種方法沒關系，我不在乎）。

問題是單擊“顯示更多”選項，然后關閉選擇菜單本身！ 必須對此進行解決，因為允許選擇多個選項不會在您單擊小部件時關閉它。

有任何想法嗎？

Answer 1

是的，禁用選項可能會有所幫助

但是首先給它一個ID，像這樣：

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

然后是js部分（使用jQuery）：

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


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

Answer 2

將data-native-menu設置為true並使用css增強菜單jqm樣式，例如：

 .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; } 

然后在js中：

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