jquery模仿select下拉列表

首页前端学习 JS/Jquery jquery模仿select下拉列表

2015年12月22日 梦想霞 4138 次浏览

这是用jquery模仿的一个select下拉列表，会HTML的人都知道select标签，但是默认的select下拉列表，无法更改样式，而我们又想要自定义好看的样式，所以自己就试着用jquery做了这个demo，可以按照自己的要求自定义样式了。

我做的样式如下：

部分代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div class="content">
<div class="select">
<p>所有选项</p>
<ul>
<li dataValue="所有选项" class="selected">所有选项</li>
<li dataValue="div+css">div+css</li>
<li dataValue="javascript">javascript</li>
<li dataValue="jquery">jquery</li>
<li dataValue="html5">html5</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".select p").click(function(e){
$(".select").toggleClass("open");
e.stopPropagation();
});
$(document).click(function(){
$(".select").removeClass("open");
});
$(".select ul li").click(function(){
var $this = $(this);
$this.addClass("selected").siblings().removeClass("selected");
$(".select p").text($this.attr("dataValue"));
});
});
</script>

点击查看本文演示内容

标签：jquery下拉列表