console 命令行工具 X clear

console

var provinceList = [
{name:'北京', cityList:[
{name:'市辖区', areaList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区']},
{name:'县', areaList:['密云县','延庆县']}
]},
{name:'上海', cityList:[
{name:'市辖区', areaList:['黄浦区','卢湾区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','南汇区','奉贤区']},
{name:'县', areaList:['崇明县']}
]},
{name:'天津', cityList:[
{name:'市辖区', areaList:['和平区','河东区','河西区','南开区','河北区','红桥区','塘沽区','汉沽区','大港区','东丽区','西青区','津南区','北辰区','武清区','宝坻区']},
{name:'县', areaList:['宁河县','静海县','蓟　县']}
]}
];

var provinceArray = new Array();
var cityArray = new Array();
var areaArray = new Array();
var provinceTag = document.getElementById("province");
var cityTag = document.getElementById("city");
var areaTag = document.getElementById("area");
var cityList;
var areaList;
var provinceArray = new Array();
var cityArray = new Array();
var areaArray = new Array();

function getProvince(){
	var provinceTag = document.getElementById("province");
	for(var i=0; i<provinceList.length; i++){　　　　//provinceList.length为省数组的长度，下标从0开始，所以定义var i=0
		var province = provinceList[i];　　　　　　　　　　//通过下标获取省列表（上面的列出列表）中的数据
		var provinceName = province.name;　　　　　　　　//根据 province.name获取省的名字
		provinceArray[i]=provinceName;　　　　　　　　　　　//将获得的省的名字注入到数组中去
		provinceTag.add(new Option(provinceName,i));　　　　//通过Option方法将省的名字与下标i对应，取出来。然后通过add()方法，将每一个名字放到provinceTag中
	}
}

function chooseProvince(th){　　　　　　　　//通过方法的调用来实现省 市之间的二级联动，th是我们设置的一个参数，方便下面进行使用，可以理解为province的一个元素（名字）
	var cityTag = document.getElementById("city");
	var index = th.selectedIndex-1;　　　　　　　　　　//此处selectedIndex的索引减1是因为我们在写<select><option>按钮时  “请选择省”  占了一个索引，所以需要减1才能对应
	var provinceName = provinceArray[index];　　　　//通过数组下标获取数据（名字）
	for(var n=0; n<provinceList.length; n++){　　　　//通过循环遍历列表数组
		var provice = provinceList[n];　　　　　　　　　　　//通过列表下标获取数据
		if (provice.name == provinceName){　　　　　　//开始建立连接，通过if判断，前提是要满足if中的条件
			cityList = provice.cityList;　　　　　　　　　　　　//通过province的cityList获取城市列表
			cityTag.innerHTML="";　　　　　　　　　　　　　　//这个步骤很重要，分析语句，是吧里面的内容变为空，意思就是当你选择一个省时，后面会出现城市的数据，当你选择另外的省时会                                                                            出现相应的市的数据，如果不删除就会同时显示在一个选择框中，就不会是我们想要的结果
			for(var c=0; c<cityList.length; c++){　　　　　　//使用循环遍历城市数列
				var city = cityList[c];　　　　　　　　　　　　　　　//根据数列下标获取城市数据
				var cityName = city.name;　　　　　　　　　　　　//获取城市的名字
				cityArray[c] = cityName;　　　　　　　　　　　　　//将城市名称存入数组中
				cityTag.add(new Option(cityName,c));　　　　　　//使用Option()方法获取每一个索引对应的数据，然后使用add()方法一一存入到数组中去，这样就可以成功创建省市连接
			}
		}
	}
}

function chooseCity(ci){
	var areaTag = document.getElementById("area");
	var index = ci.selectedIndex;
	var cityName = cityArray[index];
	for(var j=0;j<cityList.length;j++){
		var city = cityList[j];
		if(city.name == cityName){
			var areaList = city.areaList;
			areaTag.innerHTML = "";
			for( var k=0;k<areaList.length;k++){
				var area = areaList[k];
				areaTag.add(new Option(area,k));
			}
		}
	}
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var shens = [ "沈阳市", "大连市"];
        var chengs = [["和平区","沈河区","大东区","皇姑区","铁西区"],["中山区", "西岗区","甘井子区","沙河口区"]];
        function ff() {
            //doucument提供getElementById实现按照标签的id值进行查找，永远只返回第一个
            var ele = document.getElementById("sel1");
            console.log(ele.options);//可以获取当前select下的所有option
            //在js中如何创建<option>元素，document.createElement("option");
            for (let k = 0; k < shens.length; k++) {
                var op1 = document.createElement("option");
                op1.text = shens[k];//显示内容
                op1.value = "" + k;//提交数据
                console.log(op1);
                ele.options[k + 1] = op1;//将创建的option添加到options数组中则可以实现显示          
            }
        }

        function cc() {
            //首选获取sel1中选择的值？
            //获取下拉框中选中的值方法
            var ele = document.getElementById("sel1");//获取select元素
            var ele2 = document.getElementById("sel2");
            var kk = ele.selectedIndex;//获取下拉选项中的选项的索引值--序号
            //将索引值转换为提交值
            kk = ele.options[kk].value;
            //从二维数据中获取对应的城市选项
            var arr = chengs[kk];
            //将城市选项添加到sel2下拉选择框中
            //首先将下拉选项数据限制为合理的值，它会自动删除多余的选项
            ele2.options.length = arr.length + 1;
            for (let k = 0; k < arr.length; k++) {
                var op = document.createElement("option")
                op.text = arr[k];
                op.value = kk + "" + k;
                console.log(op)
                ele2.options[k + 1] = op;
            }
        }
    </script>
</head>
<!--onload是body标签的属性，表示页面加载完成后自动执行ff()函数-->

<body onload="ff()">
    <h1>选择省及其省会城市</h1>
    <form>
        <!--change表示值变事件，当选项变化时自动触发-->
        <select id="sel1" onchange="cc()">
            <option value="">请选择城市</option>

        </select>
        <select id="sel2">
            <option value="">请选择区</option>
        </select>
    </form>
</body>

</html>