Запретить закрытие виджета selectmenu

Question

У меня есть виджет selectmenu с множеством опций. Я хотел бы добавить кнопку «показать больше» в качестве последней опции, которая затем будет загружать дополнительные параметры и обновлять виджет или просто переключать их видимость, чтобы показать их, если они уже были загружены, но не были видны (любой метод было бы хорошо, я не против).

Проблема в том, что нажмите «показать больше», затем закройте меню выбора! Для этого нужна работа, так как выбор нескольких параметров не закрывает виджет, когда вы нажимаете на него.

Любые идеи?

Answer 1

да, отключенная опция может быть полезным

Но сначала дать ему идентификатор, что-то вроде:

<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

Набор данных -native-menu в true и улучшить стиль jqm меню с помощью css, что-то вроде:

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

затем в ЯШ:

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