从一个简单实例了解JavaScript

最新推荐文章于 2022-05-05 13:00:50 发布

kriswu_sweetgirl

最新推荐文章于 2022-05-05 13:00:50 发布

阅读量194

点赞数

分类专栏： Java Script

本文链接：https://blog.csdn.net/kriswu_sweetgirl/article/details/79529466

版权

Java 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Script

1 篇文章 0 订阅

订阅专栏

题目描述：

从第一个下拉框选择省份，根据省份选择不同在第二个下拉框中显示不同城市，并选择。

显示效果：

实现代码：

首先先写出不加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数组索引放进去。就可以了。

 
  var 
   proSelect 
  = 
  document.getElementById( 
  "province" 
  );  
 

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>