jQuery制作簡潔的多級聯(lián)動Select下拉框
今天我們要來分享一款很實(shí)用的jQuery插件,它是一個(gè)基于jQuery多級聯(lián)動的省市地區(qū)Select下拉框,并且值得一提的是,這款聯(lián)動下拉框是經(jīng)過自定義美化過的,外觀比瀏覽器自帶的要漂亮許多。另外,這個(gè)Select下拉框也可以綁定下拉事件,并獲取當(dāng)前選中項(xiàng)的值。
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;
}
代碼很簡潔,我這里就不多做解釋了,小伙伴們自己預(yù)覽下就知道效果是多麼的簡潔大方了,非常實(shí)用。
- bootstrap可編輯下拉框jquery.editable-select
- jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
- select下拉框插件jquery.editable-select詳解
- 利用jquery獲取select下拉框的值
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
- jQuery操作select下拉框的text值和value值的方法
- jquery動態(tài)加載select下拉框示例代碼
- jQuery操作選中select下拉框的值代碼實(shí)例
相關(guān)文章
jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄猨query 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05jQuery 選擇器項(xiàng)目實(shí)例分析及實(shí)現(xiàn)代碼
首先廢話一句,jQuery選擇器真心很強(qiáng)大!接下來詳細(xì)介紹jQuery 選擇器項(xiàng)目實(shí)例實(shí)現(xiàn)方式2012-12-12Jquery 綁定時(shí)間實(shí)現(xiàn)代碼
jquery 顯示本地時(shí)間/ 帶日期、星期/ UTC,需要的朋友可以參考下。2011-05-05web前端開發(fā)JQuery常用實(shí)例代碼片段(50個(gè))
本文給大家展示50個(gè)jquery代碼片段,這些代碼能夠給你的javascript項(xiàng)目提供幫助,需要的朋友快來學(xué)習(xí)一下吧2015-08-08z-blog SyntaxHighlighter 長代碼無法換行解決辦法(基于jquery)
這篇文章主要介紹了z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery),需要的朋友可以參考下2015-11-11a標(biāo)簽跳轉(zhuǎn)到指定div,jquery添加和移除class屬性的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猘標(biāo)簽跳轉(zhuǎn)到指定div,jquery添加和移除class屬性的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10