使用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中的内置对象有： 下面我稍微叙述一下这些对象常用的方法。

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