[javascript]代码库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
#mainsearch_select {
width: 70px;
height: 35px;
float: left;
position: relative;
}
#mselect-t {
width: 70px;
height: 37px;
line-height: 38px;
cursor: pointer;
margin-left: 5px;
}
#mselect-t span {
width: 64px;
height: 37px;
float: left;
display: block;
color: #000;
}
#mselect-t i {
width: 5px;
height: 3px;
margin-top: 17px;
float: left;
display: block;
background: url(main_select_ico.png);
}
#mselect-c {
width: 68px;
height: 103px;
border: solid 1px #ccc;
position: absolute;
top: 37px;
left: 0;
background: #fff;
display: none;
}
#mselect-c li {
width: 100%;
height: 25px;
border-bottom: dotted 1px #ddd;
line-height: 25px;
text-align: center;
cursor: pointer;
color: #000;
}
#mselect-c li:last-child {
border-bottom: none;
}
#mselect-c li:hover {
background: #b2e1ff;
color: #fff;
}
#mainsearch_btn {
width: 70px;
height: 42px;
float: right;
overflow: hidden;
}
#mainsearch_btn input[type=submit] {
width: 70px;
height: 42px;
border: none;
background: transparent;
text-indent: -9999em;
}
#mselect {
display: none;
}
</style>
</head>
<body>
<div id="mainsearch_select">
<div id="mselect-t"><span>商品信息</span><i></i></div>
<ul id="mselect-c">
<li>商品信息</li>
<li>进货记录</li>
<li>销售记录</li>
<li>库存余量</li>
</ul>
<select id="mselect" style="display:none;">
<option selected>商品信息</option>
<option>进货记录</option>
<option>销售记录</option>
<option>库存余量</option>
</select>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#mselect-c").css("display", "none");
$("#mselect-t").click(function() {
if (document.getElementById("mselect-c").style.display == "none") {
$("#mselect-c").show();
} else {
$("#mselect-c").hide();
}
});
$("#mselect-c li").click(function() {
$("#mselect-t span").text($(this).text());
var thisindex = $(this).index();
$("#mselect option").removeAttr("selected").eq(thisindex).attr("selected", "selected");
$("#mselect-c").hide();
});
})
</script>
</body>
</html>