今天我们要来分享一款很实用的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;