jQuery制作簡潔的多級聯(lián)動Select下拉框
更新時間：2014年12月23日 14:39:19 投稿：hebedich
省市多級聯(lián)動的select下拉框有很多種實現(xiàn)方式，度娘上隨便一搜就一大堆，今天我們來討論的這款特效，代碼卻很簡潔，兼容性也非常棒，推薦給大家。
今天我們要來分享一款很實用的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;
}
代碼很簡潔，我這里就不多做解釋了，小伙伴們自己預覽下就知道效果是多麼的簡潔大方了，非常實用。
相關文章
jQuery基于$.ajax設置移動端click超時處理方法
這篇文章主要介紹了jQuery基于$.ajax設置移動端click超時處理方法,分析了click事件與touchstart事件的原理與處理技巧,需要的朋友可以參考下2016-05-05
JQuery中如何傳遞參數(shù)如click(),change()等具體實現(xiàn)
有個需求讓兩個select中option相互轉(zhuǎn)換,這個作業(yè)就是給幾個按鈕添加click()事件接下來為大家介紹下如何在click(),change()傳遞參數(shù)2013-04-04
jQuery中提供了四種事件監(jiān)聽方式，分別是bind、live、delegate、on，對應的解除監(jiān)聽的函數(shù)分別是unbind、die、undelegate、off。下面通過本文逐一給大家詳細介紹，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了基于jquery實現(xiàn)瀑布流布局的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jQuery選擇器之基本過濾選擇器用法,結合實例形式分析了jQuery常見的基本過濾、屬性過濾、內(nèi)容過濾、子元素過濾等相關操作技巧,需要的朋友可以參考下2019-02-02
jQuery實現(xiàn)導航滾動到指定內(nèi)容效果完整實例【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)導航滾動到指定內(nèi)容效果,結合完整實例形式分析了頁面元素屬性動態(tài)變換操作相關技巧,涉及jQuery插件jquery.scrollto.js的使用,并附帶demo源碼下載供讀者下載參考,需要的朋友可以參考下2016-09-09
基于jQuery實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面關閉)
最近做了一個項目，其中有需求要求實現(xiàn)發(fā)送短信驗證碼后倒計時功能，其中有個難點：要求關閉頁面也進行倒計時。好吧，下面小編把jquery 發(fā)送驗證碼倒計時的實現(xiàn)代碼分享給大家，大家可以參考下2016-09-09
這篇文章主要探討了關于jQuery判斷元素是否存在的問題,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jQuery中nextAll()方法用法,實例分析了nextAll()方法的功能、定義及查找匹配元素之后所有的同輩元素使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery實現(xiàn)輸入框的放大和縮小功能,涉及jQuery基于事件響應的頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下2018-07-07