省级联动

最新推荐文章于 2021-12-25 15:32:00 发布

原创最新推荐文章于 2021-12-25 15:32:00 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

demo 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的联动下拉菜单功能，通过选择省份选项，相应城市选项将自动更新。该功能利用了JavaScript的事件监听和DOM操作，展示了基本的网页交互设计。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.aa{
				align-content: center;
			}
		</style>
	</head>
	<body>
		<div  class="aa">
			籍贯:<select onchange="selectCity(this.value)" >
			     <option name="pro" value ="0" >-上海-</option>
			     <option name="pro"  value ="1" >-江苏-</option>	
			   
				</select>
			    <select id="city">
			     <option value ="">-请选择-</option>		 
			    </select>
		</div>
	    <script type="text/javascript">	
	    	
           var city=new Array();
           city[0]=new  Array("徐汇区","黄浦区","长宁区","静安区","普陀区","虹口区","杨浦区");
           city[1]=new  Array("南京","苏州","无锡","常州","南通");
             function selectCity(value){
             	var cCity= document.getElementById("city");//用于向标签里追加元素
             	//重新点击清空数据
             for(var i=cCity.options.length;i>0;i--){
             	cCity.options[i]=null;
             }
//           	          	
             	 var pro=document.getElementsByName("pro");
             	 
//           	 console.log(pro[1].value);
          	  		for(var j=0;j<pro.length;j++){	
          	  	     if(pro[j].value==value){
          	  	     	
          	  	     	for(var k=value;k<city[value].length;k++){          	  	     		
          	  	     		//创建元素
          	  	     		var options=document.createElement("option");
          	  	     		//创建文本
          	  	     		var text=document.createTextNode(city[value][k]);
          	  	     		options.appendChild(text);
          	  	     		cCity.appendChild(options);         	  	     		 
          	  	     	}
          	  	     	
          	  	     }
           	    }
             }
            
//         console.log(pro.length);
//            for(var j=0;j<pro.length;j++){
//            	if(pro)
//            }
	    	
	    	 
	    	
	    </script>
	</body>
</html>