教你一天玩转JavaScript(八)——使用JavaScript完成省市联动的效果

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

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



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

JavaScript中创建数组的语法



JavaScript中的onchange事件

下拉列表框改变事件。欲完成省市联动的效果，必然需要有两个下拉框，然后监听一个下拉框的onchange事件，在值发生改变的时候，基于改变后的值去控制后面的下拉框的值。

JavaScript中DOM的操作——创建元素和添加元素

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

创建一个HTML文件

确定事件：onchange事件

触发函数，在函数中编写代码

获得到所选择的省份的信息

根据选择的省份的信息获得到对应的数组中的市的数据

遍历数组中的市的信息

创建元素，创建文本，最后将元素添加到第二个列表中

我在【案例六：使用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中的内置对象

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);