码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 实现简单二级联动

时间:2015-07-20 23:41:28      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

 <body>
     省份:
	 <select id="province">
	 	<option value="">请选择</option>
		<option value="吉林省">吉林省</option>
		<option value="辽宁省">辽宁省</option>
		<option value="山东省">山东省</option>
    </select>
	城市:
	<select id="city">
    	<option value="">请选择</option>
    </select>
	 </select>
  </body>
     <script type="text/javascript">
     	 document.getElementById("province").onchange=function(){
		 	    var city= document.getElementById("city");
				var options=city.getElementsByTagName("option");
				var len=options.length;
				for(var z=1;z<len;z++){
					city.removeChild(options[1]);
				}
				
				var provinceValue = this.value;
				var cityArr;
		     if(provinceValue=="吉林省"){
					cityArr = ["长春市","吉林市","四平市","松原市","通化市"];
				
				}else if(provinceValue=="辽宁省"){
				//3 为辽宁省定制城市列表
				cityArr = ["沈阳市","大连市","铁岭市","抚顺市","丹东市"];
			 }else if(provinceValue=="山东省"){
				//3 为山东省定制城市列表
				cityArr = ["青岛市","济南市","烟台市","潍坊市","威海市"];
			  }
			for(var i=0;i<cityArr.length;i++){
				var option=document.createElement("option");
				option.setAttribute("value",cityArr[i]);
				var text = document.createTextNode(cityArr[i]);
				option.appendChild(text);
				city.appendChild(option);
			}
		 }
     </script>

版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript 实现简单二级联动

标签:

原文地址:http://blog.csdn.net/treeling_/article/details/46973125

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!