JS省市区三级联动-白红宇

JS省市区三级联动

阅读量：5778 次

发布时间：2019-06-18

本文共 2540 字，大约阅读时间需要 8 分钟。

不需要访问后台服务器端，不使用Ajax，无刷新，纯JS实现的省市区三级联动。

当省市区数据变动是只需调正js即可。

使用方法：

<!DOCTYPE html>

<html>

<head>

<title>纯JS省市区联动</title>

</head>

<body>

<div>

省：<select id="cmbProvince"></select>

市：<select id="cmbCity"></select>

区：<select id="cmbArea"></select>

省：<select id="Select1"></select>

市：<select id="Select2"></select>

区：<select id="Select3"></select>

addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陕西', '宝鸡市', '金台区');

addressInit('Select1', 'Select2', 'Select3');

</script>

</div>

</body>

</html>

核心代码如下：

var

addressInit =

function

(_cmbProvince, _cmbCity, _cmbArea, defaultProvince, defaultCity, defaultArea)

var

cmbProvince = document.getElementById(_cmbProvince);

var

cmbCity = document.getElementById(_cmbCity);

var

cmbArea = document.getElementById(_cmbArea);

function

cmbSelect(cmb, str)

for

(

var

i=0; i<cmb.options.length; i++)

if

(cmb.options[i].value == str)

cmb.selectedIndex = i;

return

;

}

function

cmbAddOption(cmb, str, obj)

var

option = document.createElement(

"OPTION"

);

cmb.options.add(option);

option.innerHTML = str;

option.value = str;

option.obj = obj;

}

function

changeCity()

cmbArea.options.length = 0;

if

(cmbCity.selectedIndex == -1)

return

;

var

item = cmbCity.options[cmbCity.selectedIndex].obj;

for

(

var

i=0; i<item.areaList.length; i++)

cmbAddOption(cmbArea, item.areaList[i],

null

);

}

cmbSelect(cmbArea, defaultArea);

}

function

changeProvince()

cmbCity.options.length = 0;

cmbCity.onchange =

null

;

if

(cmbProvince.selectedIndex == -1)

return

;

var

item = cmbProvince.options[cmbProvince.selectedIndex].obj;

for

(

var

i=0; i<item.cityList.length; i++)

cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i]);

}

cmbSelect(cmbCity, defaultCity);

changeCity();

cmbCity.onchange = changeCity;

}

for

(

var

i=0; i<provinceList.length; i++)

cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i]);

}

cmbSelect(cmbProvince, defaultProvince);

changeProvince();

cmbProvince.onchange = changeProvince;

}

var

provinceList = [

{name:

'北京'

, cityList:[

{name:

'市辖区'

, areaList:[

'东城区'

,

'西城区'

,

'崇文区'

,

'宣武区'

,

'朝阳区'

,

'丰台区'

,

'石景山区'

,

'海淀区'

,

'门头沟区'

,

'房山区'

,

'通州区'

,

'顺义区'

,

'昌平区'

,

'大兴区'

,

'怀柔区'

,

'平谷区'

]},

{name:

'县'

, areaList:[

'密云县'

,

'延庆县'

]}

]},

{name:

'上海'

, cityList:[

{name:

'市辖区'

, areaList:[

'黄浦区'

,

'卢湾区'

,

'徐汇区'

,

'长宁区'

,

'静安区'

,

'普陀区'

,

'闸北区'

,

'虹口区'

,

'杨浦区'

,

'闵行区'

,

'宝山区'

,

'金山区'

,

'松江区'

,

'青浦区'

,

'南汇区'

,

'奉贤区'

]},

{name:

'县'

, areaList:[

'崇明县'

]}

];

实例下载：

转载地址：http://fuuyx.baihongyu.com/

你可能感兴趣的文章

java四种线程池简介，使用

查看>>

一般处理程序(.ashx)中session的使用方法

typedef BOOL(WINAPI *MYFUNC) (HWND,COLORREF,BYTE,DWORD);语句的理解

查看>>

jsp 特殊标签

查看>>

[BZOJ] 1012 [JSOI2008]最大数maxnumber

IIS7/8下提示 HTTP 错误 404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求...