模仿select下拉列表
Posted 天空中的霞光
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模仿select下拉列表相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
list-style:none;
margin: 0;
padding: 0;
text-decoration: none;
}
.box_lx{
width: 100px;
text-align: center;
font-size: 12px;
}
.box_lx .l_title{
width: 100%;
padding: 5px 0;
border: 1px solid #999;
position: relative;
font-size: 14px;
}
.list_box{
width: 100%;
padding: 5px 0;
border: 1px solid #999;
border-top: 1px solid transparent;
display: none;
}
.list_box ul li{
padding: 5px 0;
}
.list_box ul li:hover{
background-color: #FFB2B2;
color: #fff;
cursor: pointer;
}
.l_title span{
display: inline-block;
position: absolute;
top: 50%;
right: 5px;
width: 0;
height: 0;
margin-top: -3px;
border-top: 5px solid #ccc;
border-right: 5px solid rgba(204, 204, 204, 0.02);
border-left: 5px solid rgba(204, 204, 204, 0.02);
border-bottom: 5px solid rgba(204, 204, 204, 0.02);
}
</style>
</head>
<body>
<ul class="box_lx">
<li class="l_title">
<s>中国</s>
<span></span>
</li>
<li class="list_box">
<ul>
<li>中国1</li>
<li>中国2</li>
<li>中国3</li>
<li>中国4</li>
<li>中国5</li>
<li>中国6</li>
<li>中国7</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
<li>中国</li>
</ul>
</li>
</ul>
</body>
<script type="text/javascript">
$(".l_title").click(function(){
$(".list_box").css("display","block");
})
$(".list_box ul li").click(function(){
var Text=$(this).text();
$(".l_title s").text(Text);
$(".list_box").css("display","none");
})
</script>
</html>
以上是关于模仿select下拉列表的主要内容，如果未能解决你的问题，请参考以下文章
在选择另一个 select2 下拉列表时重置一个 select2 下拉列表的元素
请js高手帮忙看下，我想用select那个下拉按钮，但是点击的时候不想让它出现下拉框，怎么搞？