本文主要和大家分享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、代码实现
// 定义二维数组:
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
for(var j = 0 ;j
// 创建option元素:
var opEl = document.createElement("option"); // 创建文本元素:
var textNo = document.createTextNode(cities[i][j]); // 将文本添加到option中.
opEl.appendChild(textNo); // 将option添加到第二个下拉列表中
citySel.appendChild(opEl);
}
}
}
}
-请选择-
吉林省
山东省
河北省
江苏省
5、实现效果
初学者,希望不足大家可以留言指正。
相关推荐: