题目描述:
从第一个下拉框选择省份,根据省份选择不同在第二个下拉框中显示不同城市,并选择。
显示效果:
实现代码:
首先先写出不加script的html页面的代码:就是写出两个select-option的标签,然后我的设计是不选择省份时第二个下拉框中没有默认的内容,所以第二个下拉框select标签下面没有option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市级联效果</title>
</head>
<body>
<select id="province" οnchange="selectCitys()" style="width:100px">
<option>--选择省份--</option>
</select>
<select id="city" style="width:100px">
</select>
</body>
</html>
1、在script标签里面首先声明并初始化一个全局变量,类型是数组,数组的索引是省份名称,不是java代码中通常的数字索引号,形式是:info["陕西省"];然后给索引为陕西省的添加它的城市作为它的值。
p.s.
a、info["陕西省"]:说一下,数组其实也是一种对象,而对象其实就是一个键值对的集合,对象可以有属性也可以有方法,对象的属性和方法可以使用方括号或点号的方式访问。(详见:http://www.jb51.net/article/70208.htm)
b、DOM对象的add():语法是selectobject.add(option,before),option:要添加选项元素。before:在选项数组的该元素之前增加新的元素。如果该参数是null,元素添加到选项数组的末尾。(DOM的相关方法可以查询w3school)
2、然后给第一个select标签下添加option标签,把各个省份显示在下拉列表中。具体实现思路是:遍历info数组然后每遍历一次new Option(text,value),把每次遍历到的info数组索引放进去。就可以了。
p.s.
a、getElementById():这一句是能够使下面的操作指到省份下拉列表的select标签,就是通过select的id值,调用getElementById()方法(这个方法是document对象的方法,document对象是window对象的子对象之一也是比较重要并且常用的对象,关于window和document可以参考:http://blog.csdn.net/byrantch/article/details/51593019),得到id值指定的对象。
b、window.οnlοad=function fun():当网页加载完毕后调用fun()函数,就是加载完毕html的文本,在这是指两个select标签,调用fun()函数,避免先加载函数的话找不到select的id值(网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况)
3、城市下拉列表的实现,大致思路是:先获得省份下拉列表的选择值,之后遍历info数组去匹配它的索引,匹配到之后,遍历info["四川省"]的值数组,然后每遍历一个城市new Option(text,value)添加一个option标签
然后第二步加入script标签的代码后:一般没有使用window.onload的script标签放在代码的最后来加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市级联效果</title>
<script type="text/javascript">
var info=[];
info["陕西省"]=["西安市","咸阳市","宝鸡市","延安市"];
info["广东省"]=["广州市","深圳市","珠海市","东莞市"];
info["江苏省"]=["南京市","苏州市","扬州市"];
function allProvince(){
var proSelect=document.getElementById("province");
for(var pro in info){
proSelect.add(new Option(pro,pro),null);
}
}
function selectCitys(){
var proValue=document.getElementById("province").value;
var citySelect=document.getElementById("city");
citySelect.length=0;
for(var pro in info){
if(pro==proValue){
for(var key in info[pro]){
citySelect.add(new Option(info[pro][key],info[pro][key]),null);
}
}
}
}
window.οnlοad=allProvince;
</script>
</head>
<body>
<select id="province" οnchange="selectCitys()" style="width:100px">
<option>--选择省份--</option>
</select>
<select id="city" style="width:100px">
</select>
</body>
</html>