欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡單實用jquery版三級聯(lián)動select示例

 更新時間：2013年07月04日 16:58:19   作者：  
本文主要為大家介紹下通過jquery實現(xiàn)三級聯(lián)動select這里用到的json文件，只是事例，根據(jù)情況添加或編寫，感興趣的朋友可以參考下哈，希望對大家有所幫助

html和js部分

復(fù)制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=gbk />
<title>selectList</title>
<style type="text/css">
*{margin:0;padding:0;}
.selectList{width:200px;margin:50px auto;}
</style>
<script type="text/javascript" src="jquery1.7.1.js"></script>
</head>
<body>
<div class="selectList">
<select class="province">
<option>請選擇</option>
</select>
<select class="city">
<option>請選擇</option>
</select>
<select class="district">
<option>請選擇</option>
</select>
</div>
<div class="selectList">
<select class="province">
<option>請選擇</option>
</select>
<select class="city">
<option>請選擇</option>
</select>
<select class="district">
<option>請選擇</option>
</select>
</div>
<script type="text/javascript">
$(function(){
$(".selectList").each(function(){
var url = "area.json";
var areaJson;
var temp_html;
var oProvince = $(this).find(".province");
var oCity = $(this).find(".city");
var oDistrict = $(this).find(".district");
//初始化省
var province = function(){
$.each(areaJson,function(i,province){
temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
});
oProvince.html(temp_html);
city();
};
//賦值市
var city = function(){
temp_html = "";
var n = oProvince.get(0).selectedIndex;
$.each(areaJson[n].c,function(i,city){
temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
});
oCity.html(temp_html);
district();
};
//賦值縣
var district = function(){
temp_html = "";
var m = oProvince.get(0).selectedIndex;
var n = oCity.get(0).selectedIndex;
if(typeof(areaJson[m].c[n].d) == "undefined"){
oDistrict.css("display","none");
}else{
oDistrict.css("display","inline");
$.each(areaJson[m].c[n].d,function(i,district){
temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";
});
oDistrict.html(temp_html);
};
};
//選擇省改變市
oProvince.change(function(){
city();
});
//選擇市改變縣
oCity.change(function(){
district();
});
//獲取json數(shù)據(jù)
$.getJSON(url,function(data){
areaJson = data;
province();
});
});
});
</script>
</body>
</html>

json文件（area.json），這里只是事例，根據(jù)情況添加或編寫
復(fù)制代碼 代碼如下:

[
{"p":"江西省",
"c":[
{"ct":"南昌市",
"d":[
{"dt":"西湖區(qū)"},
{"dt":"東湖區(qū)"},
{"dt":"高新區(qū)"}
]},
{"ct":"贛州市",
"d":[
{"dt":"瑞金縣"},
{"dt":"南豐縣"},
{"dt":"全南縣"}
]}
]},
{"p":"北京",
"c":[
{"ct":"東城區(qū)"},
{"ct":"西城區(qū)"}
]},
{"p":"河北省",
"c":[
{"ct":"石家莊",
"d":[
{"dt":"長安區(qū)"},
{"dt":"橋東區(qū)"},
{"dt":"橋西區(qū)"}
]},
{"ct":"唐山市",
"d":[
{"dt":"灤南縣"},
{"dt":"樂亭縣"},
{"dt":"遷西縣"}
]}
]}
]

各位最好自己封裝成插件，方便調(diào)用

相關(guān)文章

  • Jquery的hover方法讓鼠標(biāo)經(jīng)過li時背景變色

    Jquery的hover方法讓鼠標(biāo)經(jīng)過li時背景變色

    鼠標(biāo)經(jīng)過時讓li背景變色，在某些時候還是挺實用的，下面為大家介紹下使用Jquery的hover方法來實現(xiàn)下，感興趣的朋友可以參考下
    2013-09-09
  • 用jquery獲取select標(biāo)簽中選中的option值及文本的示例

    用jquery獲取select標(biāo)簽中選中的option值及文本的示例

    下面小編就為大家分享一篇用jquery獲取select標(biāo)簽中選中的option值及文本的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • 兩種方法解決javascript url post 特殊字符轉(zhuǎn)義 + & #

    兩種方法解決javascript url post 特殊字符轉(zhuǎn)義 + & #

    本文主要介紹javascript使用url傳值的時候數(shù)據(jù)丟失的問題，希望對大家有所幫助。
    2016-04-04
  • jQuery中jqGrid分頁實現(xiàn)代碼

    jQuery中jqGrid分頁實現(xiàn)代碼

    今天看到j(luò)avaeye上有人使用了jqGrid實現(xiàn)了數(shù)據(jù)的分頁，參考它的代碼，實現(xiàn)了這個功能，搬出來曬曬，作為自己以后學(xué)習(xí)的資料
    2011-11-11
  • jquery淡入淡出效果簡單實例

    jquery淡入淡出效果簡單實例

    這篇文章主要介紹了jquery淡入淡出效果簡單實現(xiàn)方法,以完整實例形式分析了jQuery中fadeIn及fadeOut實現(xiàn)淡入淡出的相關(guān)技巧,需要的朋友可以參考下
    2016-01-01
  • 用jquery模仿的a的title屬性的例子

    用jquery模仿的a的title屬性的例子

    用jQuery實現(xiàn)的模仿a的title屬性的例子，在測試的時候ie6,7上出現(xiàn)了層次混亂，下面是解決方法，感興趣的朋友可以看看
    2014-10-10

    • 最新評論