熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

簡單實用jquery版三級聯動select示例

2013-11-23 17:53:22  來源: Javascript 
本文主要為大家介紹下通過jquery實現三級聯動select這裡用到的json文件只是事例根據情況添加或編寫感興趣的朋友可以參考下哈希望對大家有所幫助  

  html和js部分

復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=gbk />
<title>selectList</title>
<style type="text/css">
*{margin:;padding:;}
selectList{width:px;margin:px auto;}
</style>
<script type="text/javascript" src="jqueryjs"></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 = "areajson";
var areaJson;
var temp_html;
var oProvince = $(this)find("province");
var oCity = $(this)find("city");
var oDistrict = $(this)find("district");
//初始化省
var province = function(){
$each(areaJsonfunction(iprovince){
temp_html+="<option value="+provincep+">"+provincep+"</option>";
});
oProvincehtml(temp_html);
city();
};
//賦值市
var city = function(){
temp_html = "";
var n = oProvinceget()selectedIndex;
$each(areaJson[n]cfunction(icity){
temp_html+="<option value="+cityct+">"+cityct+"</option>";
});
oCityhtml(temp_html);
district();
};
//賦值縣
var district = function(){
temp_html = "";
var m = oProvinceget()selectedIndex;
var n = oCityget()selectedIndex;
if(typeof(areaJson[m]c[n]d) == "undefined"){
oDistrictcss("display""none");
}else{
oDistrictcss("display""inline");
$each(areaJson[m]c[n]dfunction(idistrict){
temp_html+="<option value="+districtdt+">"+districtdt+"</option>";
});
oDistricthtml(temp_html);
};
};
//選擇省改變市
oProvincechange(function(){
city();
});
//選擇市改變縣
oCitychange(function(){
district();
});
//獲取json數據
$getJSON(urlfunction(data){
areaJson = data;
province();
});
});
});
</script>
</body>
</html>

  
json文件(areajson)這裡只是事例根據情況添加或編寫

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

  
各位最好自己封裝成插件方便調用


From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25292.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.