前端简单入门第十四讲 使用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);
    
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页