jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件，它是一个基于jQuery多级联动的省市地区Select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个Select下拉框也可以绑定下拉事件，并获取当前选中项的值。
html代码：
<divclass="wrap">
<divclass="nice-select"name="nice-select">
<inputtype="text"value="==选择省份=="readonly>
<ul>
<lidata-value="1">湖北省</li>
<lidata-value="2">广东省</li>
<lidata-value="3">湖南省</li>
<lidata-value="4">四川省</li>
</ul>
</div>
<divclass="h20">
</div>
<divclass="nice-select"name="nice-select">
<inputtype="text"value="==选择城市=="readonly>
<ul>
<lidata-value="1">武汉市</li>
<lidata-value="2">深圳市</li>
<lidata-value="3">长沙市</li>
<lidata-value="4">成都市</li>
</ul>
</div>
<divclass="h20">
</div>
<divclass="nice-select"name="nice-select">
<inputtype="text"value="==选择区县=="readonly>
<ul>
<lidata-value="1">蔡甸区</li>
<lidata-value="2">南山区</li>
<lidata-value="3">雨花区</li>
<lidata-value="4">武侯区</li>
</ul>
</div>
</div>
<scripttype="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){
varval=$(this).text();
vardataVal=$(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:"微软雅黑","MicrosoftYahei";
background-color:#EEE;
}
a
{
color:#555;
}
a:hover
{
color:#f00;
}
input
{
font-size:14px;
font-family:"微软雅黑","MicrosoftYahei";
}
.wrap
{
width:500px;
margin:100pxauto;
}
.h20
{
height:20px;
overflow:hidden;
clear:both;
}
.nice-select
{
width:245px;
padding:010px;
height:38px;
border:1pxsolid#999;
position:relative;
box-shadow:005px#999;
background:#fffurl(images/a2.jpg)no-repeatrightcenter;
cursor:pointer;
}
.nice-selectinput
{
display:block;
width:100%;
height:38px;
line-height:38px\9;
border:0;
outline:0;
background:none;
cursor:pointer;
}
.nice-selectul
{
width:100%;
display:none;
position:absolute;
left:-1px;
top:38px;
overflow:hidden;
background-color:#fff;
max-height:150px;
overflow-y:auto;
border:1pxsolid#999;
border-top:0;
box-shadow:03px5px#999;
z-index:9999;
}
.nice-selectulli
{
height:30px;
line-height:30px;
overflow:hidden;
padding:010px;
cursor:pointer;
}
.nice-selectulli.on
{
background-color:#e0e0e0;
}
代码很简洁，我这里就不多做解释了，小伙伴们自己预览下就知道效果是多麽的简洁大方了，非常实用。