教你一天玩转JavaScript(八)——使用JavaScript完成省市联动的效果
2017-05-05 23:02
495 查看
使用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);
相关文章推荐
- 教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果
- 一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果
- 教你一天玩转JavaScript(三)——使用JavaScript完成图片轮播的效果
- 教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色
- JavaScript学习——使用JS完成省市二级联动
- 教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
- ajax完成异步的省市联动效果--使用xml接收数据
- 使用JavaScript完成最简单加密解密和模仿QQ的窗口抖动效果
- javascript省市二级联动效果
- 使用city-picker完成省市三级联动
- 使用JavaScript完成最简单加密解密和模仿QQ的窗口抖动效果
- 使用三层实现省市县三级联动(利用ajax实现无刷新效果)
- 使用javascript实现省市联动小demo
- 使用javascript解析xml实现省市县三级联动
- 使用json完成联动效果
- 教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
- 教你一天玩转JavaScript(二)——完成对注册页面的数据的简单校验
- web前端教程:使用javascript实现多级联动效果
- JavaScript实现省市县三级联动效果~~~
- JavaScript实现省市县三级联动效果~~~