五省联动

最新推荐文章于 2022-07-05 22:50:26 发布

原创最新推荐文章于 2022-07-05 22:50:26 发布 · 392 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

16 篇文章

订阅专栏

	<body>
		<select id= "province" onchange="changProvince(this.value);" >
			<option >--请选择--</option>
			<option value="beijing">北京</option>
			<option value="nanjing">南京</option>
			<option value="tianjin">天津</option>
			<option value="xiamen">厦门</option>
		</select>
		
		<select id= "city"  >
			<option >--请选择--</option>

		</select>
		
		<input type="button" value="测试清除" onclick="del();" />
		
	<script type="text/javascript">
		function changProvince(provinces){
			var province = document.getElementById("province");
			var city = document.getElementById("city");
			var cityElement = city.getElementsByTagName("option");
			var cityBj = ['东城','西城','通州','朝阳','海淀','昌平','丰台'];
			var cityTj = ['塘沽区','和平区','任城区','和水区'];
			var cityXm = ['思明区','集美区','湖里区','同集区'];
			while( city.hasChildNodes() ){
				city.removeChild(city.firstChild);
			}	
			if(provinces == "beijing"){
				for(var i = 0;i<cityBj.length;i++){
					var ops = document.createElement("option");
					var text = document.createTextNode(cityBj[i]);
					ops.appendChild(text);
					city.appendChild(ops);
				}
			}
			
			if(provinces == "tianjin"){
				for(var i = 0;i<cityTj.length;i++){
					var ops = document.createElement("option");
					var text = document.createTextNode(cityTj[i]);
					ops.appendChild(text);
					city.appendChild(ops);
				}
			}
			
			if(provinces == "xiamen"){
				for(var i = 0;i<cityXm.length;i++){
					var ops = document.createElement("option");
					var text = document.createTextNode(cityXm[i]);
					ops.appendChild(text);
					city.appendChild(ops);
				}
			}
		}
	</script>
	</body>