中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

今天我們要來分享一款很實用的jQuery插件，它是一個基于jQuery多級聯(lián)動的省市地區(qū)Select下拉框，并且值得一提的是，這款聯(lián)動下拉框是經(jīng)過自定義美化過的，外觀比瀏覽器自帶的要漂亮許多。另外，這個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="==選擇區(qū)縣==" readonly>

<ul>

<li data-value="1">蔡甸區(qū)</li>

<li data-value="2">南山區(qū)</li>

<li data-value="3">雨花區(qū)</li>

<li data-value="4">武侯區(qū)</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("數(shù)字值是：" + 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技術專欄