Question

我有一个带有一堆选项的selectmenu小部件。我想添加一个＆＃34;显示更多＆＃34;按钮作为最后一个选项，然后加载更多选项并刷新窗口小部件或只是切换它们的可见性以显示它们是否已经加载但是不可见（任何一种方法都可以，我不介意）。

问题是点击＆＃34;显示更多＆＃34;选项然后关闭选择菜单本身！必须解决这个问题，因为允许选择多个选项并不会在您点击它时关闭它。

有什么想法吗？

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

阻止selectmenu小部件关闭

2 个答案: