前端简单入门第十四讲 使用JavaScript完成省市联动的效果

使用JavaScript完成省市联动的效果

实际开发中大概总会碰到这样的需求：在注册页面上有两个下拉列表框，左侧省份的下拉列表框中的值一改变，右侧的市的下拉列表框中的值也要随之发生变化，也即省市联动。效果类似如下：

要使用JavaScript完成省市联动的效果，首先须知道以下知识点：

1. JavaScript中创建数组的语法；
   
2. JavaScript中的onchange事件；
   下拉列表框改变事件。欲完成省市联动的效果，必然需要有两个下拉框，然后监听一个下拉框的onchange事件，在值发生改变的时候，基于改变后的值去控制后面的下拉框的值。
3. JavaScript中DOM的操作——创建元素和添加元素。

知晓上面三个知识点之后，下面我就按照如下步骤使用JavaScript完成省市联动的效果：

1. 创建一个HTML文件；
2. 确定事件：onchange事件；
3. 触发函数，在函数中编写代码；
4. 获得到所选择的省份的信息；
5. 根据选择的省份的信息获得到对应的数组中的市的数据；
6. 遍历数组中的市的信息；
7. 创建元素，创建文本，最后将元素添加到第二个列表中。

我在【案例六：使用JS完成省市二级联动效果.html】页面中摘出代表省市的两个下拉列表框：

<tr>
	<td>籍贯</td>
	<td>
		<select id="province" name="province" onchange="changeCity(this.value)">
			<option value="">-请选择-</option>
			<option value="0">浙江省</option>
			<option value="1">江苏省</option>
			<option value="2">湖北省</option>
			<option value="3">河北省</option>
			<option value="4">吉林省</option>
		</select>
		<select id="city" name="city">
			<option>-请选择-</option>
		</select>
	</td>
</tr>

接着编写JavaScript代码完成省市联动的效果：

<script>
	function changeCity(value) {
		// 获得到选中的省份的信息
		var city = document.getElementById("city");
		
		/*
		// 清空第二个列表中的内容
		for (var i = city.options.length; i > 0; i--) {
			city.options[i] = null;
		}
		*/
		// 清空第二个列表中内容的代码也可写成如下一行代码
		city.options.length = 1;
		
		// alert(value);
		for (var i = 0; i < arrs.length; i++) {
			if (value == i) {
				// 获得所有的市的信息
				for (var j = 0; j < arrs[i].length; j++) {
					// alert(arrs[i][j]);
					// 创建元素
					var opEl = document.createElement("option"); // <option></option>
					// 创建文本节点
					var textNode = document.createTextNode(arrs[i][j]);
					// 将文本的内容添加到option元素中
					opEl.appendChild(textNode);
					// 将option元素添加到第二个列表中
					city.appendChild(opEl);
				}
			}
		}
	}
</script>

读者如需查看源码，请参考前端简单入门第十四讲 使用JavaScript完成省市联动的效果！

总结

JavaScript中的内置对象

JavaScript中的内置对象有：

下面我稍微叙述一下这些对象常用的方法。

• Array
  Array对象的方法：
  
• Boolean
  Boolean对象的方法：
  
• Date
  Date对象的方法：
  
  其中要注意getTime()这个方法，它在某些地方有奇效。
• Math
  Math对象的方法：
  
• String
  String对象的方法基本上类似于Java中String类的那些方法。String对象的方法有：
  
  较常用的方法已用红框框出。

JavaScript中的全局函数

JavaScript中的全局函数有：

了解一下以下全局函数：

• parseInt()
  解析一个字符串并返回一个整数。例如，parseInt("11");

• parseFloat()
  解析一个字符串并返回一个浮点数。例如，parseFloat("32.09");

• 解码

  • decodeURI()
  • decodeURIComponent()：可对一些特殊字符进行解码

• 编码

  • encodeURI()
  • encodeURIComponent()：可对一些特殊字符进行编码

• eval
  将一段内容当成是JavaScript的代码执行。例如：

  var sss = "alert('aaaa')";
  eval(sss);