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

}

代码很简洁，我这里就不多做解释了，小伙伴们自己预览下就知道效果是多麽的简洁大方了，非常实用。

更多信息请查看IT技术专栏