得知互动

标题: jquery制作简洁的多级联动select下拉框 [打印本页]

作者: swmozowtfl 时间: 2015-7-18 00:12
标题: jquery制作简洁的多级联动select下拉框
今天我们要来分享一款很实用的jquery插件，它是一个基于jquery多级联动的省市地区select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个select下拉框也可以绑定下拉事件，并获取当前选中项的值。
html代码：
代码如下:
<div class=wrap>
<div class=nice-select name=nice-select>
<input type=text value===选择省份== readonly>
<ul>
<li data-value=1>湖北省</li>
<li data-value=2>广东省</li>
<li data-value=3>湖南省</li>
<li data-value=4>四川省</li>
</ul>
</div>
<div class=h20>
</div>
<div class=nice-select name=nice-select>
<input type=text value===选择城市== readonly>
<ul>
<li data-value=1>武汉市</li>
<li data-value=2>深圳市</li>
<li data-value=3>长沙市</li>
<li data-value=4>成都市</li>
</ul>
</div>
<div class=h20>
</div>
<div class=nice-select name=nice-select>
<input type=text value===选择区县== readonly>
<ul>
<li data-value=1>蔡甸区</li>
<li data-value=2>南山区</li>
<li data-value=3>雨花区</li>
<li data-value=4>武侯区</li>
</ul>
</div>
</div>
<script type=text/javascript src=js/jquery.js></script>
<script>
$('[name=nice-select]').click(function (e) {
$('[name=nice-select]').find('ul').hide();
$(this).find('ul').show();
e.stoppropagation();
});
$('[name=nice-select] li').hover(function (e) {
$(this).toggleclass('on');
e.stoppropagation();
});
$('[name=nice-select] li').click(function (e) {
var val = $(this).text();
var dataval = $(this).attr(data-value);
$(this).parents('[name=nice-select]').find('input').val(val);
$('[name=nice-select] ul').hide();
e.stoppropagation();
alert(中文值是： + val);
alert(数字值是： + dataval);
//alert($(this).parents('[name=nice-select]').find('input').val());
});
$(document).click(function () {
$('[name=nice-select] ul').hide();
});
</script>
css代码：
代码如下:
body
{
color: #555;
font-size: 14px;
font-family: 微软雅黑 , microsoft yahei;
background-color: #eee;
}
a
{
color: #555;
}
a:hover
{
color: #f00;
}
input
{
font-size: 14px;
font-family: 微软雅黑 , microsoft yahei;
}
.wrap
{
width: 500px;
margin: 100px auto;
}
.h20
{
height: 20px;
overflow: hidden;
clear: both;
}
.nice-select
{
width: 245px;
padding: 0 10px;
height: 38px;
border: 1px solid #999;
position: relative;
box-shadow: 0 0 5px #999;
background: #fff url(images/a2.jpg) no-repeat right center;
cursor: pointer;
}
.nice-select input
{
display: block;
width: 100%;
height: 38px;
line-height: 38px \9;
border: 0;
outline: 0;
background: none;
cursor: pointer;
}
.nice-select ul
{
width: 100%;
display: none;
position: absolute;
left: -1px;
top: 38px;
overflow: hidden;
background-color: #fff;
max-height: 150px;
overflow-y: auto;
border: 1px solid #999;
border-top: 0;
box-shadow: 0 3px 5px #999;
z-index: 9999;
}
.nice-select ul li
{
height: 30px;
line-height: 30px;
overflow: hidden;
padding: 0 10px;
cursor: pointer;
}
.nice-select ul li.on
{
background-color: #e0e0e0;
}
代码很简洁，我这里就不多做解释了，小伙伴们自己预览下就知道效果是多麽的简洁大方了，非常实用。

更多网页制作信息请查看：网页制作

作者: alapScady 时间: 2015-9-13 13:20
什么啊

作者: buingeEvineus 时间: 2015-9-13 13:20
我不是来为楼主呐喊加油的，也不是对楼主进行围堵攻击的。

作者: Acropozelan 时间: 2015-9-13 13:20
这篇帖子构思新颖，题材独具匠心，段落清晰，情节诡异，跌宕起伏，主线分明，引人入胜，平淡中显示出不凡的文学功底，可谓是字字珠玑，句句经典，是我辈应当学习之典范（不好意思回错帖了

作者: alapScady 时间: 2015-9-13 13:20
真是天底下好事多多

作者: tohme 时间: 2015-10-26 18:09
求您了,给个机会

作者: effoggikeftor 时间: 2015-10-26 18:09
我怎么说那?~!

作者: effoggikeftor 时间: 2015-10-26 18:10
下次有人骂我了...我给他还回去..

欢迎光临得知互动 (https://bbs.dezhifl.com/)