使用数组api中的join进行数据渲染，达到多级城市联动效果

前言

我们知道，数组api中的join会将数组里面的元素拿出来，进行拼接，最后以字符串的形式输出。例如：

var arr=[1,2,3,4]
console.log(arr.join("~"))//1~2~3~4~5~6

采用以上原理，我们对拿到的多维数组进行join拆分后，进行页面渲染，达到多级城市的联动效果。 在html中写入：

	<select id="sel1">

	</select>
	<select id="sel2">

	</select>

在js中写入

//每一个城市
var arr1 = ["-请选择-", "北京", "南京", "西京", "东京", "重庆"];
//二维数组：最大目的就是为了再次细分分类 - 每个城市的区县
var arr2 = [
            ["-请选择-"],
            ["-请选择-", "北京区1", "北京区2", "北京区3", "北京区4"],
            ["-请选择-", "南京区1", "南京区2", "南京区3", "南京区4"],
            ["-请选择-", "西京区1", "西京区2", "西京区3", "西京区4"],
            ["-请选择-", "东京区1", "东京区2", "东京区3", "东京区4"],
            ["-请选择-", "重庆区1", "重庆区2", "重庆区3", "重庆区4"],
		]
sel1.innerHTML = "<option>" + arr1.join("</option><option>") + "</option>";
//onchange事件：当下拉框的值发生改变的时候，触发事件
sel1.onchange = function () {
var i = this.selectedIndex;//此属性只有select可以使用，其他标签没得，拿到当前选中的索引
sel2.innerHTML = "<option>" + arr2[i].join("</option><option>") + "</option>";
	}
sel1.onchange();

效果如下：