JS如何控制二级联动
程序员文章站
2022-05-12 15:20:22
...
本文主要和大家分享JS如何控制二级联动,在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份,将这个省份下的城市列出,希望本文能帮助到大家。
1、需求
在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份,将这个省份下的城市列出。
2、技术分析
数组
-
语法:
new Array();//长度为0 new Array(size);//指定长度的 new Array(e1,e2..);//指定元素 非官方 var arr4=["aa","bb"];
-
常用属性:
length
-
注意:
数组是可变的 数组可以存放任意值
-
常用方法:(了解)
存放值:对内容的操作 pop():弹 最后一个 push():插入 到最后 shift():删除第一个 unshift():插入到首位 打印数组: join(分隔符):将数组里的元素按照指定的分隔符打印 拼接数组: concat():连接两个或更多的数组,并返回结果。 对结构的操作: sort();排序 reverse();反转
3、步骤分析
步骤一:确定事件:onchange.
步骤二:获得改变的省份值 .
步骤三:比较省份的值 与 数组中定义的值是否相等,如果相等获得这个省份对应的所有的市的数组.
步骤四:创建option元素,将数组中的值添加到option元素中。
步骤五:将option添加到第二个下拉列表中.
4、代码实现
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script> // 定义二维数组: var cities = new Array(4); cities[0] = new Array("长春市","吉林市","*市","延边市"); cities[1] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市"); cities[2] = new Array("石家庄市","唐山市","邯郸市","廊坊市"); cities[3] = new Array("南京市","苏州市","扬州市","无锡市"); function selectCity(val){ // alert(val); var citySel = document.getElementById("city"); // 清除原有的option: citySel.options.length = 0; // 遍历数组: for(var i=0;i<cities.length;i++){ if(val == i){ // 遍历数组: for(var j = 0 ;j<cities[i].length;j++){ // alert(cities[i][j]); // 创建option元素: var opEl = document.createElement("option"); // 创建文本元素: var textNo = document.createTextNode(cities[i][j]); // 将文本添加到option中. opEl.appendChild(textNo); // 将option添加到第二个下拉列表中 citySel.appendChild(opEl); } } } } </script> </head> <body> <select id="province" onchange="selectCity(this.value)"> <option value="">-请选择-</option> <option value="0">吉林省</option> <option value="1">山东省</option> <option value="2">河北省</option> <option value="3">江苏省</option> </select> <select id="city"> </select> </body></html>
5、实现效果
初学者,希望不足大家可以留言指正。
相关推荐:
以上就是JS如何控制二级联动的详细内容,更多请关注其它相关文章!
上一篇: PHP中利用JS弹出错误信息乱码
下一篇: 百度云推送的问题?