zoukankan      html  css  js  c++  java
  • javascript之DOM编程实现城市的联动框

    需求;用一张图片表示。



    分析:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript"> 
    	
    	function showCity(){
    		//维护一个二维数组存储省份对应的城市
    		var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];			
    	
    		//获取省份对应的节点
    		var provinceNode = document.getElementById("province");
    		//获取省份选中的选项
    		var selectIndex =  provinceNode.selectedIndex;
    		//获取对应的城市
    		var  cityDatas = citys[selectIndex];
    		
    		//找到city节点
    		var cityNode = document.getElementById("city");
    		
    		
    		//设置options的个数。<span style="font-family: Arial, Helvetica, sans-serif;">先清空city框所有option。因为不清空的话相当于不断的添加城市了。这里</span><span style="font-family: Arial, Helvetica, sans-serif;">保留一个option,即城市这一项保留下来其他的相当于清空了。</span><span style="font-family: Arial, Helvetica, sans-serif;">
    </span>
    
    		cityNode.options.length = 1 ;
    		
    		
    		
    		//遍历对应的所有城市然后创建对应的option添加到city上。
    		for(var index = 0; index<cityDatas.length ; index++){
    			var option = document.createElement("option");//创建option项
    			option.innerHTML = cityDatas[index];//为创建的option添加属性值
    			cityNode.appendChild(option);//拼接到cityNode后边,即在城市的属性后边添加城市。
    		}
    		
    		
    	
    	}
    	
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    	省份<select id="province" onchange="showCity()">
        		<option>省份</option>
        		<option>广东</option>
                <option>湖南</option>
                <option>广西</option>
        	</select>
    	城市<select id="city"><option>城市</option></select>
        
    </body>
    </html>
    


  • 相关阅读:
    预处理命令
    函数
    结构体
    字符数组
    数组
    文件
    用 typedef 定义类型
    枚举类型
    联合
    位运算
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299763.html
Copyright © 2011-2022 走看看