基于jquery & json的省市區(qū)聯(lián)動(dòng)代碼
更新時(shí)間：2012年06月26日 20:34:43 作者：
基于jquery & json的省市區(qū)聯(lián)動(dòng)代碼，需要的朋友可以參考下
效果演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>省市區(qū)聯(lián)動(dòng)</title>
<script src="/Scripts/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/script.js" type="text/javascript"></script>
</head>
<body>
<h2>Demo:</h2>
<select id="province">
<option value="0">請(qǐng)選擇省份</option>
</select>
<select id="city">
<option value="0">請(qǐng)選擇城市</option>
</select>
<select id="district">
<option value="0">請(qǐng)選擇區(qū)縣</option>
</select>
<!--下列為初始值(可選,編輯表單時(shí)設(shè)置)-->
<input type="hidden" value="440000" id="pre_province"/>
<input type="hidden" value="440500" id="pre_city"/>
<input type="hidden" value="440511" id="pre_district"/>
</body>
</html>
script.js代碼：
/*
author: elycir
create: 2012-06
description: 省市區(qū)三級(jí)(二級(jí))聯(lián)動(dòng)
*/
$(function () {
var citySelector = function () {
var province = $("#province");
var city = $("#city");
var district = $("#district");
var preProvince = $("#pre_province");
var preCity = $("#pre_city");
var preDistrict = $("#pre_district");
var jsonProvince = "/content/json-array-of-province.js";
var jsonCity = "/content/json-array-of-city.js";
var jsonDistrict = "/content/json-array-of-district.js";
var hasDistrict = true;
var initProvince = "<option value='0'>請(qǐng)選擇省份</option>";
var initCity = "<option value='0'>請(qǐng)選擇城市</option>";
var initDistrict = "<option value='0'>請(qǐng)選擇區(qū)縣</option>";
return {
Init: function () {
var that = this;
that._LoadOptions(jsonProvince, preProvince, province, null, 0, initProvince);
province.change(function () {
that._LoadOptions(jsonCity, preCity, city, province, 2, initCity);
});
if (hasDistrict) {
city.change(function () {
that._LoadOptions(jsonDistrict, preDistrict, district, city, 4, initDistrict);
});
province.change(function () {
city.change();
});
}
province.change();
},
_LoadOptions: function (datapath, preobj, targetobj, parentobj, comparelen, initoption) {
$.get(
datapath,
function (r) {
var t = ''; // t: html容器
var s; // s: 選中標(biāo)識(shí)
var pre; // pre: 初始值
if (preobj === undefined) {
pre = 0;
} else {
pre = preobj.val();
}
for (var i = 0; i < r.length; i++) {
s = '';
if (comparelen === 0) {
if (pre !== "" && pre !== 0 && r[i].code === pre) {
s = ' selected=\"selected\" ';
pre = '';
}
t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>';
}
else {
var p = parentobj.val();
if (p.substring(0, comparelen) === r[i].code.substring(0, comparelen)) {
if (pre !== "" && pre !== 0 && r[i].code === pre) {
s = ' selected=\"selected\" ';
pre = '';
}
t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>';
}
}
}
if (initoption !== '') {
targetobj.html(initoption + t);
} else {
targetobj.html(t);
}
},
"json"
);
}
};
} ();
citySelector.Init();
});
省市區(qū)json數(shù)據(jù)文件：點(diǎn)擊下載
html代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>省市區(qū)聯(lián)動(dòng)</title>
<script src="/Scripts/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/script.js" type="text/javascript"></script>
</head>
<body>
<h2>Demo:</h2>
<select id="province">
<option value="0">請(qǐng)選擇省份</option>
</select>
<select id="city">
<option value="0">請(qǐng)選擇城市</option>
</select>
<select id="district">
<option value="0">請(qǐng)選擇區(qū)縣</option>
</select>
<!--下列為初始值(可選,編輯表單時(shí)設(shè)置)-->
<input type="hidden" value="440000" id="pre_province"/>
<input type="hidden" value="440500" id="pre_city"/>
<input type="hidden" value="440511" id="pre_district"/>
</body>
</html>
script.js代碼：
復(fù)制代碼 代碼如下:
/*
author: elycir
create: 2012-06
description: 省市區(qū)三級(jí)(二級(jí))聯(lián)動(dòng)
*/
$(function () {
var citySelector = function () {
var province = $("#province");
var city = $("#city");
var district = $("#district");
var preProvince = $("#pre_province");
var preCity = $("#pre_city");
var preDistrict = $("#pre_district");
var jsonProvince = "/content/json-array-of-province.js";
var jsonCity = "/content/json-array-of-city.js";
var jsonDistrict = "/content/json-array-of-district.js";
var hasDistrict = true;
var initProvince = "<option value='0'>請(qǐng)選擇省份</option>";
var initCity = "<option value='0'>請(qǐng)選擇城市</option>";
var initDistrict = "<option value='0'>請(qǐng)選擇區(qū)縣</option>";
return {
Init: function () {
var that = this;
that._LoadOptions(jsonProvince, preProvince, province, null, 0, initProvince);
province.change(function () {
that._LoadOptions(jsonCity, preCity, city, province, 2, initCity);
});
if (hasDistrict) {
city.change(function () {
that._LoadOptions(jsonDistrict, preDistrict, district, city, 4, initDistrict);
});
province.change(function () {
city.change();
});
}
province.change();
},
_LoadOptions: function (datapath, preobj, targetobj, parentobj, comparelen, initoption) {
$.get(
datapath,
function (r) {
var t = ''; // t: html容器
var s; // s: 選中標(biāo)識(shí)
var pre; // pre: 初始值
if (preobj === undefined) {
pre = 0;
} else {
pre = preobj.val();
}
for (var i = 0; i < r.length; i++) {
s = '';
if (comparelen === 0) {
if (pre !== "" && pre !== 0 && r[i].code === pre) {
s = ' selected=\"selected\" ';
pre = '';
}
t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>';
}
else {
var p = parentobj.val();
if (p.substring(0, comparelen) === r[i].code.substring(0, comparelen)) {
if (pre !== "" && pre !== 0 && r[i].code === pre) {
s = ' selected=\"selected\" ';
pre = '';
}
t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>';
}
}
}
if (initoption !== '') {
targetobj.html(initoption + t);
} else {
targetobj.html(t);
}
},
"json"
);
}
};
} ();
citySelector.Init();
});
省市區(qū)json數(shù)據(jù)文件：點(diǎn)擊下載
您可能感興趣的文章:
- js實(shí)現(xiàn)的全國省市二級(jí)聯(lián)動(dòng)下拉選擇菜單完整實(shí)例
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- 最好用的省市二級(jí)聯(lián)動(dòng) 原生js實(shí)現(xiàn)你值得擁有
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類，簡單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單！
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- js實(shí)現(xiàn)一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)選擇框代碼分享
- 全國省市二級(jí)聯(lián)動(dòng)下拉菜單 js版
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
- js實(shí)現(xiàn)省級(jí)聯(lián)動(dòng)（數(shù)據(jù)結(jié)構(gòu)優(yōu)化）
相關(guān)文章
jQuery 添加/移除CSS類實(shí)現(xiàn)代碼
在網(wǎng)頁設(shè)計(jì)中，我們常常要使用Javascript來改變頁面元素的樣式。2010-02-02
jQuery操作input type=radio的實(shí)現(xiàn)代碼
jQuery操作input type=radio的實(shí)現(xiàn)代碼，需要的朋友可以參考下2012-06-06
jQuery中常用的遍歷函數(shù)用法實(shí)例總結(jié)
這篇文章主要介紹了jQuery中常用的遍歷函數(shù)用法,以實(shí)例形式分析并總結(jié)了jquery中常見的遍歷函數(shù)使用方法與注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
很多新手朋友們都不知道jquery 中的each()怎么跳出循環(huán)，在each的回調(diào)函數(shù)中使用return false2014-05-05
翻譯整理的jQuery使用查詢手冊(cè)...2007-03-03
JQuery Ajax如何實(shí)現(xiàn)注冊(cè)檢測(cè)用戶名
這篇文章主要介紹了JQuery Ajax如何實(shí)現(xiàn)注冊(cè)檢測(cè)用戶名,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
jQuery實(shí)現(xiàn)ajax的疊加和停止(終止ajax請(qǐng)求)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的疊加和停止的關(guān)鍵代碼，代碼簡單易懂，需要的朋友可以參考下2016-08-08
jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了jquery+CSS3實(shí)現(xiàn)3D拖拽相冊(cè)效果的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
jQuery常用樣式操作實(shí)例分析(獲取、設(shè)置、追加、刪除、判斷等)
這篇文章主要介紹了jQuery常用樣式操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素樣式的獲取、設(shè)置、追加、刪除、判斷等操作方法,需要的朋友可以參考下2016-09-09
jQuery實(shí)現(xiàn)CheckBox全選、全不選功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)CheckBox全選、全不選功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01