JavaScript之实现select下拉选择框的联动

HTML部分：

1. 有两个下拉选择框，一个是id为"province"的省份选择框，另一个是id为"city"的城市选择框。
2. 每个选择框默认都有一个选项，用于提示用户进行选择。

代码：

<select id="province">
  <option>请选择省:</option>
</select>

<select id="city">
  <option>请选择市:</option>
</select>

JavaScript部分

实现步骤：

1. 首先定义了一个名为data的变量，它是一个包含省市数据的对象。每个省对应一个包含城市的数组。
2. 使用DOM方法通过id获取到两个下拉选择框的元素，并分别赋值给变量p和c。
3. 使用for循环遍历data对象中的省份：
   1. 创建一个新的<option>元素，命名为optionP。
   2.  设置optionP的innerHTML为省份的名称（通过i获取）。
   3. 将optionP添加到省份选择框p中。
4. 设置省份选择框p的onchange事件处理函数：
   1. 获取当前选中的省份，通过this.selectedIndex获取选中的索引，然后通过innerHTML获取选中的省份名称，赋值给变量pro。
   2. 根据选中的省份名称pro在data对象中找到对应的城市数组，赋值给变量citys。
   3. 清空城市选择框c的内容，将其innerHTML设置为空。
   4. 使用for循环遍历城市数组citys：
      1.  创建一个新的<option>元素，命名为option_city。
      2. 设置option_city的innerHTML为城市的名称（通过citys[i]获取）。
      3.  将option_city添加到城市选择框c中。

代码演示：

<script>
	data = {"安徽省": ["阜阳", "合肥"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

    //使用dom获取id进行查找到两个下拉选择框
	var p = document.getElementById("province");
	var c = document.getElementById("city");

	for (var i in data) {
		var optionP = document.createElement("option");
		optionP.innerHTML = i;
		p.appendChild(optionP);
	}
	p.onchange = function () {
		var pro = (this.options[this.selectedIndex]).innerHTML;
		var citys = data[pro];
		// 清空option
		c.innerHTML = "";

		for (var i=0;i<citys.length;i++) {
		  var option_city = document.createElement("option");
		  option_city.innerHTML = citys[i];
		  c.appendChild(option_city);
		}
	}
</script>

这段代码的作用是实现了一个省市选择的联动功能，当选择了一个省份后，对应的城市会显示在城市选择框中。每次选择不同的省份，城市选择框的选项会动态地改变。

效果展示：