js实现省，市，区，门店，电话，地址多级联动

js实现省，市，区，门店，电话，地址多级联动

比较常见的是省市区三级联动，多级联动的写法第一次写，是在三级联动的基础上改的，如有错误欢迎指出。思路很简单，父级下拉框改变的时候加载出子级元素，一层一层往下。如果上级改变，清空所有子级的选项，只留提示选项。效果有点像后台通过查询数据库实现联动的效果。如果需要提交数据，也可以通过后台来实现。

初始状态图：

选择之后效果图：
居中的图片:

Html部分：select标签绑定onchange()事件，

// 数据联动部分
<div class="frmwrap">
	<form class="yaofrm">
		<select class="provinceselect" id="prov" onchange="showCity(this)">
			<option value="-1">省</option>
		</select>
		<select class="cityselect" id="city" onchange="showCountry(this)">
			<option value="-1">市</option>
		</select>
		<select class="areaselect" id="country" onchange="showShop(this)">
			<option value="-1">区域</option>
		</select>
		<select class="nameselect" id="shop" onchange="showNumAndAddr(this)">
			<option value="-1">请选择经销商</option>
		</select>
		<div class="numwrap hidden" id="numwrap">
			<label class="numtext">展厅电话</label>
			<input type="text" readonly="readonly" class="numinfo" id="numinfo" value="" />
		</div>
		<div class="addresswrap hidden" id="addresswrap">
			<label class="addresstext">详细地址</label>
			<input type="text" readonly="readonly" class="addrinfo" id="addrinfo" value="" />
		</div>
	</form>
</div>

method.js部分：

/*根据id获取对象*/
function $(str) {
	return document.getElementById(str);
}

var prov = $('prov');
var city = $('city');
var country = $('country');
var shop = $('shop');
var numinfo = $('numinfo');
var addrinfo = $('addrinfo');

/*用于保存当前所选的省市区*/
var current = {
	prov: '',
	city: '',
	country: '',
	shop: '',
	numinfo: '',
	addrinfo: ''
};
var phonenum = document.getElementById("numwrap");
var address = document.getElementById("addresswrap");

/*自动加载省份列表*/
(function showProv() {
	var len = provice.length;
	for(var i = 0; i < len; i++) {
		var provOpt = document.createElement('option');
		provOpt.innerText = provice[i]['name'];
		provOpt.value = i;
		prov.appendChild(provOpt);
	}
})();

/*根据所选的省份来显示城市列表*/
function showCity(obj) {
	//第二次选择时，初始化下级选项
	for(var i = 1; i < city.childNodes.length; i++) {
		city.remove(i);
		city.options[i] = null;
	}
	for(var i = 1; i < country.childNodes.length; i++) {
		country.remove(i);
		country.options[i] = null;
	}
	for(var i = 1; i < shop.childNodes.length; i++) {
		shop.remove(i);
		shop.options[i] = null;
	}
	phonenum.classList.add('hidden');
	address.classList.add('hidden');
	var val = obj.options[obj.selectedIndex].value;
	if(val != current.prov) {
		current.prov = val;
	}
	if(val != null) {
		city.length = 1;
		var cityLen = provice[val]["city"].length;
		for(var j = 0; j < cityLen; j++) {
			var cityOpt = document.createElement('option');
			cityOpt.innerText = provice[val]["city"][j].name;
			cityOpt.value = j;
			city.appendChild(cityOpt);
		}
	}

}

/*根据所选的城市来显示区县列表*/
function showCountry(obj) {
	for(var i = 1; i < country.childNodes.length; i++) {
		country.remove(i);
		country.options[i] = null;
	}
	for(var i = 1; i < shop.childNodes.length; i++) {
		shop.remove(i);
		shop.options[i] = null;
	}
	phonenum.classList.add('hidden');
	address.classList.add('hidden');
	var val = obj.options[obj.selectedIndex].value;
	if(val != current.city) {
		current.city = val;
	}
	if(val != null) {
		country.length = 1;
		var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
		for(var q = 0; q < countryLen; q++) {
			var countryOpt = document.createElement('option');
			countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[q].name;
			countryOpt.value = q;
			country.appendChild(countryOpt);
		}
	}
}
/*根据所选的区县来显示门店列表*/
function showShop(obj) {
	for(var i = 1; i < shop.childNodes.length; i++) {
		shop.remove(i);
		shop.options[i] = null;
	}
	phonenum.classList.add('hidden');
	address.classList.add('hidden');
	current.country = obj.options[obj.selectedIndex].value;
	if((current.city != null) && (current.country != null)) {}

	var val = obj.options[obj.selectedIndex].value;
	if(val != current.shop) {
		current.shop = val;
	}
	if(val != null) {
		shop.length = 1; //清空之前的内容只留第一个默认选项
		var citylength = provice[current.prov]["city"].length;
		var shopLen = provice[current.prov]["city"][citylength - 1]["districtAndCounty"][val].mendian.length;

		if(shopLen == 0) {
			return;
		}
		for(var m = 0; m < shopLen; m++) {
			var shopOpt = document.createElement('option');
			//console.log(shopOpt)
			shopOpt.innerText = provice[current.prov]["city"][citylength - 1]["districtAndCounty"][val].mendian[m].name;
			shopOpt.value = m;
			shop.appendChild(shopOpt);
		}
	}
}

function showNumAndAddr(obj) {
    phonenum.classList.add('hidden');
	address.classList.add('hidden');
	var val = obj.options[obj.selectedIndex].value;
	if(val != current.numinfo || val != current.addrinfo) {
		current.numinfo = val;
		current.addrinfo = val;
	}
	if(val != null) {
		numinfo.length = 1;
		addrinfo.length = 1;
		var citylength = provice[current.prov]["city"].length;
		var numinfoOpt = provice[current.prov]["city"][citylength - 1]["districtAndCounty"][current.shop]["mendian"][val].NumAndAddr[0];
		var addrinfoOpt = provice[current.prov]["city"][citylength - 1]["districtAndCounty"][current.shop]["mendian"][val].NumAndAddr[1];
		if(numinfoOpt != null) {
			document.getElementById('numinfo').value = numinfoOpt;
			document.getElementById('addrinfo').value = addrinfoOpt;
			//显示电话,地址
			phonenum.classList.remove('hidden');
			address.classList.remove('hidden');
		}
	}

}
...

addr.js部分：只是实例，具体添加

// 地址文件 
var provice = [{
		name: "北京市",
		city: [{
			name: "北京市",
			districtAndCounty: [{
				name: "东城区",
				mendian: [{
					name: "门店1",
					NumAndAddr: ["021-00000000", "东城区东城路000号"]
				},
				{
					name: "门店2",
					NumAndAddr: ["021-11111111", "东城区东城路111号"]
				},
				{
					name: "门店3",
					NumAndAddr: ["021-11111111", "东城区东城路111号"]
				},
				{
					name: "门店4",
					NumAndAddr: ["021-11111111", "东城区东城路111号"]
				}]
			}, {
				name: "西城区",
				mendian: [{
						name: "门店5",
						NumAndAddr: ["021-33333333", "西城区西城路000号"]
					},
					{
						name: "门店6",
						NumAndAddr: ["021-44444444", "西城区西城路111号"]
					}]
			}]
		}
		]
	}, {
		name: "天津市",
		city: [{
			name: "天津市",
			districtAndCounty: [{
				name: "和平区",
				mendian: [{
						name: "门店5",
						NumAndAddr: ["021-00000000", "东城区东城路000号"]
					},
					{
						name: "门店6",
						NumAndAddr: ["021-11111111", "东城区东城路111号"]
					}
				]
			}, {
				name: "河东区",
				mendian: [{
						name: "门店7",
						NumAndAddr: ["021-33333333", "西城区西城路000号"]
					},
					{
						name: "门店8",
						NumAndAddr: ["021-44444444", "西城区西城路111号"]
					}
				]
			}]
		}, {
			name: "张家口市",
			districtAndCounty: [{
				name: "康保县",
				mendian: [{
						name: "门店5",
						NumAndAddr: ["021-00000000", "东城区东城路000号"]
					},
					{
						name: "门店6",
						NumAndAddr: ["021-11111111", "东城区东城路111号"]
					}
				]
			}, {
				name: "阿斯顿",
				mendian: [{
						name: "门店7",
						NumAndAddr: ["021-33333333", "西城区西城路000号"]
					},
					{
						name: "门店8",
						NumAndAddr: ["021-44444444", "西城区西城路111号"]
					}
				]
			}]
		}]
	}, {
		name: "河北省",
		city: [{
			name: "石家庄市",
			districtAndCounty: [{
				name: "长安区",
				mendian: [{
						name: "门店5",
						NumAndAddr: ["021-00000000", "东城区东城路000号"]
					},
					{
						name: "门店6",
						NumAndAddr: ["021-11111111", "东城区东城路111号"]
					}
				]
			}, {
				name: "桥东区",
				mendian: [{
						name: "门店7",
						NumAndAddr: ["021-33333333", "西城区西城路000号"]
					},
					{
						name: "门店8",
						NumAndAddr: ["021-44444444", "西城区西城路111号"]
					}
				]
			}]
		}, {
			name: "张家口市",
			districtAndCounty: [{
				name: "康保县",
				mendian: [{
						name: "门店5",
						NumAndAddr: ["021-00000000", "东城区东城路000号"]
					},
					{
						name: "门店6",
						NumAndAddr: ["021-11111111", "东城区东城路111号"]
					}
				]
			}, {
				name: "阿斯顿",
				mendian: [{
						name: "门店7",
						NumAndAddr: ["021-33333333", "西城区西城路000号"]
					},
					{
						name: "门店8",
						NumAndAddr: ["021-44444444", "西城区西城路111号"]
					}
				]
			}, {
				name: "asd",
				mendian: [{
						name: "门店7",
						NumAndAddr: ["021-33333333", "西城区西城路000号"]
					},
					{
						name: "门店8",
						NumAndAddr: ["021-44444444", "西城区西城路111号"]
					}
				]
			}]
		}]
	}
];

css部分忽略。