基于jquery & json的省市区联动代码

2019-08-04 08:57栏目:WRB前端

效果演示:

效果演示:

澳门威尼斯人app 1

澳门威尼斯人app 2

html代码:

html代码:

复制代码 代码如下:

澳门威尼斯人app,复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>省市区联动</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">请选择省份</option>
</select>
<select id="city">
<option value="0">请选择城市</option>
</select>
<select id="district">
<option value="0">请选择区县</option>
</select>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>省市区联动</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">请选择省份</option>
</select>
<select id="city">
<option value="0">请选择城市</option>
</select>
<select id="district">
<option value="0">请选择区县</option>
</select>

<!--下列为初始值(可选,编辑表单时设置)-->
<input type="hidden" value="440000" id="pre_province"/>
<input type="hidden" value="440500" id="pre_city"/>
<input type="hidden" value="440511" id="pre_district"/>

<!--下列为初始值(可选,编辑表单时设置)-->
<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>

</body>
</html>

script.js代码:

script.js代码:

复制代码 代码如下:

复制代码 代码如下:

/*
author: elycir
create: 2012-06
description: 省市区三级(二级)联动
*/
$(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'>请选择省份</option>";
var initCity = "<option value='0'>请选择城市</option>";
var initDistrict = "<option value='0'>请选择区县</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: 选中标识
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>';
}
}

/*
author: elycir
create: 2012-06
description: 省市区三级(二级)联动
*/
$(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'>请选择省份</option>";
var initCity = "<option value='0'>请选择城市</option>";
var initDistrict = "<option value='0'>请选择区县</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: 选中标识
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();
});

}
if (initoption !== '') {
targetobj.html(initoption t);
} else {
targetobj.html(t);
}
},
"json"
);
}
};
} ();
citySelector.Init();
});

省市区json数据文件:点击下载

省市区json数据文件:点击下载

您可能感兴趣的文章:

  • JSON HTML实现国家省市联动选择效果
  • js简单实现HTML标签Select联动带跳转
  • PHP Mysql Ajax JS实现省市区三级联动
  • JS实多级联动下拉菜单类,简单实现省市区联动菜单!
  • js实现的全国省市二级联动下拉选择菜单完整实例
  • 最好用的省市二级联动 原生js实现你值得拥有
  • jquery json 通用三级联动下拉列表
  • js操作二级联动实现代码
  • JS制作简单的三级联动
  • JavaScript结合HTML DOM实现联动菜单

html代码: 复制代码 代码如下: !DOCTYPE html html head meta charset="utf-8" / title省市区联动/title script src="/Scripts/jquery.min.js" type="text/jav...

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:基于jquery &amp;amp; json的省市区联动代码