<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>UL Select Box - jsFiddle demo by Starx</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-
1.7.1.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background:
#ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$("ul").on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').toggle();
});
var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.toggle();
});
$("#submit").click(function() {
alert("The selected Value is "+
$("ul").find(".selected").data("value"));
});
});//]]>
</script>
</head>
<body>
<a href="#" id="submit"> Get Value</a>
<ul>
<li class="init">[SELECT]</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
<li data-value="value 3">Option 3</li>
</ul>
</body></html>
【 在 dba03 (dba) 的大作中提到: 】
: 下拉框，是通过ul，li，js，css来实现的，如下。
:
http://jsfiddle.net/Starx/a6NJk/2/: 我想js写个脚本，自动模拟用户鼠标点击，在弹出下拉框，然后选择最后一个选项。
: ...................
--
FROM 59.108.5.*
附件(1.6KB) test.html