javascript - 防止选择菜单小部件关闭

Question

我有一个带有很多选项的选择菜单小部件。我想添加一个“显示更多”按钮作为最后一个选项，然后可以加载更多选项并刷新小部件，或者只是切换它们的可见性以显示它们，如果它们已经加载但不可见（任何一种方法会好的，我不介意）。

问题是单击“显示更多”选项然后关闭选择菜单本身！必须解决此问题，因为允许选择多个选项不会在您单击小部件时关闭它。

有任何想法吗？

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");
    });
});