建站
咨詢
售后
建站咨詢
新聞中心
jquery寫三級(jí)聯(lián)動(dòng),怎么把那個(gè)市屬于的哪個(gè)省分開呢
需要核心文件jquery.cityselect.js，通過ajax訪問獲取省地市數(shù)據(jù)文件
成都創(chuàng)新互聯(lián)主要從事做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)日照,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108
[javascript]?view plain?copy
/*
Ajax?三級(jí)省市聯(lián)動(dòng)
日期：2012-7-18
settings?參數(shù)說明
-----
url:省市數(shù)據(jù)josn文件路徑
prov:默認(rèn)省份
city:默認(rèn)城市
dist:默認(rèn)地區(qū)（縣）
nodata:無數(shù)據(jù)狀態(tài)
required:必選項(xiàng)
------------------------------?*/
(function($)?{
$.fn.citySelect?=?function(settings)?{
if?(this.length??1)?{
return;
}
;
//?默認(rèn)值
settings?=?$.extend({
url:?"city.min.js",
prov:?null,
city:?null,
dist:?null,
nodata:?null,
required:?true
},?settings);
var?box_obj?=?this;
var?prov_obj?=?box_obj.find(".prov");
var?city_obj?=?box_obj.find(".city");
var?dist_obj?=?box_obj.find(".dist");
var?prov_val?=?settings.prov;
var?city_val?=?settings.city;
var?dist_val?=?settings.dist;
var?select_prehtml?=?(settings.required)???""?:?"option?value=''請(qǐng)選擇/option";
var?city_json;
//?賦值市級(jí)函數(shù)
var?cityStart?=?function()?{
var?prov_id?=?prov_obj.get(0).selectedIndex;
if?(!settings.required)?{
prov_id--;
}
;
city_obj.empty().attr("disabled",?true);
dist_obj.empty().attr("disabled",?true);
if?(prov_id??0?||?typeof?(city_json.citylist[prov_id].c)?==?"undefined")?{
if?(settings.nodata?==?"none")?{
city_obj.css("display",?"none");
dist_obj.css("display",?"none");
}?else?if?(settings.nodata?==?"hidden")?{
city_obj.css("visibility",?"hidden");
dist_obj.css("visibility",?"hidden");
}
;
return;
}
;
//?遍歷賦值市級(jí)下拉列表
temp_html?=?select_prehtml;
$.each(city_json.citylist[prov_id].c,?function(i,?city)?{
temp_html?+=?"option?value='"?+?city.n?+?"'"?+?city.n?+?"/option";
});
city_obj.html(temp_html).attr("disabled",?false).css({"display":?"",?"visibility":?""});
distStart();
};
//?賦值地區(qū)（縣）函數(shù)
var?distStart?=?function()?{
var?prov_id?=?prov_obj.get(0).selectedIndex;
var?city_id?=?city_obj.get(0).selectedIndex;
if?(!settings.required)?{
prov_id--;
city_id--;
}
;
dist_obj.empty().attr("disabled",?true);
if?(prov_id??0?||?city_id??0?||?typeof?(city_json.citylist[prov_id].c[city_id].a)?==?"undefined")?{
if?(settings.nodata?==?"none")?{
dist_obj.css("display",?"none");
}?else?if?(settings.nodata?==?"hidden")?{
dist_obj.css("visibility",?"hidden");
}
;
return;
}
;
//?遍歷賦值市級(jí)下拉列表
temp_html?=?select_prehtml;
$.each(city_json.citylist[prov_id].c[city_id].a,?function(i,?dist)?{
temp_html?+=?"option?value='"?+?dist.s?+?"'"?+?dist.s?+?"/option";
});
dist_obj.html(temp_html).attr("disabled",?false).css({"display":?"",?"visibility":?""});
};
var?init?=?function()?{
//?遍歷賦值省份下拉列表
temp_html?=?select_prehtml;
$.each(city_json.citylist,?function(i,?prov)?{
temp_html?+=?"option?value='"?+?prov.p?+?"'"?+?prov.p?+?"/option";
});
prov_obj.html(temp_html);
//?若有傳入省份與市級(jí)的值，則選中。（setTimeout為兼容IE6而設(shè)置）
setTimeout(function()?{
if?(settings.prov?!=?null)?{
prov_obj.val(settings.prov);
cityStart();
setTimeout(function()?{
if?(settings.city?!=?null)?{
city_obj.val(settings.city);
distStart();
setTimeout(function()?{
if?(settings.dist?!=?null)?{
dist_obj.val(settings.dist);
}
;
},?1);
}
;
},?1);
}
;
},?1);
//?選擇省份時(shí)發(fā)生事件
prov_obj.bind("change",?function()?{
cityStart();
});
//?選擇市級(jí)時(shí)發(fā)生事件
city_obj.bind("change",?function()?{
distStart();
});
};
//?設(shè)置省市json數(shù)據(jù)
if?(typeof?(settings.url)?==?"string")?{
$.getJSON(settings.url,?function(json)?{
city_json?=?json;
init();
});
}?else?{
city_json?=?settings.url;
init();
}
;
};
})(jQuery);
一張表 怎么 jquery省市區(qū)三級(jí)聯(lián)動(dòng)
省市區(qū)要實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)，肯定要有一個(gè)級(jí)聯(lián)對(duì)應(yīng)關(guān)系，即哪個(gè)省下面有哪些市，哪些市下面有哪些區(qū)/縣，所以在json數(shù)據(jù)中就需要使用parent、id這些字面量來標(biāo)明相應(yīng)的對(duì)應(yīng)關(guān)系。當(dāng)然不一定非要用parent，其他名稱也行，只要能對(duì)應(yīng)上就行。
插件jquery.cityselect.js省市聯(lián)動(dòng)效果怎么使用
HTML
首先在head中載入jquery庫(kù)和cityselect插件。
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript" src="js/jquery.cityselect.js"/script
接下來，我們?cè)?city中，放置三個(gè)select，并且三個(gè)select分別設(shè)置class屬性為：prov、city、dist，分別表示省、市、區(qū)（縣）三個(gè)下拉框。注意如果只想實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)，則去掉第三個(gè)dist的select即可。
div id="city"
select class="prov"/select
select class="city" disabled="disabled"/select
select class="dist" disabled="disabled"/select
/div
jQuery
調(diào)用cityselect插件非常簡(jiǎn)單，直接調(diào)用：
$("#city").citySelect();
自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"長(zhǎng)沙", //城市
dist:"岳麓區(qū)", //區(qū)縣
nodata:"none" //當(dāng)子集無數(shù)據(jù)時(shí)，隱藏select
});
當(dāng)然，你還可以擴(kuò)展，自定義下拉列表選項(xiàng)數(shù)據(jù)，你可以根據(jù)需要設(shè)置下拉內(nèi)容，注意數(shù)據(jù)格式一定要為JSON格式。
$("#city").citySelect({
url:{"citylist":[
{"p":"前端技術(shù)","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
{"n":"JAVASCIPT"}]},
{"p":"編程語(yǔ)言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"數(shù)據(jù)庫(kù)","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
});
你還可以利用PHP等后臺(tái)語(yǔ)言將數(shù)據(jù)庫(kù)中的數(shù)據(jù)轉(zhuǎn)換成JSON格式，然后使用url參數(shù)指向后臺(tái)地址也能實(shí)現(xiàn)無刷新聯(lián)動(dòng)效果。
$("#city").citySelect({
url:"data.php"
});
求jquery省市區(qū)三級(jí)聯(lián)動(dòng) 思路
先加載出省的下拉列表，選擇后再通過ajax獲取相應(yīng)的市的下拉列表
選擇市后再ajax獲取區(qū)的下拉列表。
分享標(biāo)題：省市聯(lián)動(dòng)jquery,省市聯(lián)動(dòng)開展物流企業(yè)備案執(zhí)法檢查
鏈接URL：http://ef60e0e.cn/article/phedos.html
