js省市级联

最新推荐文章于 2020-05-24 13:00:09 发布

云の小天

最新推荐文章于 2020-05-24 13:00:09 发布

阅读量247

点赞数

分类专栏： web 文章标签： js省市级联效果

本文链接：https://blog.csdn.net/Y_G_LKW/article/details/99432104

版权

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

js省市级联

代码如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用javascript(js)实现省市级联的效果</title>
		<style>
			body{
				position:absolute;
				top:200px;
				left:300px;
			}
		</style>
	 
		<script type="text/javascript">
			
			var GuitarBrand = new Array();
				GuitarBrand["合板"]=['烧火棍1','烧火棍2','烧火棍3'];
				GuitarBrand["面单"]=['达达沃','卢森','卡马','圣马可'];
				GuitarBrand["全单"]=['斐波那契SJC','马丁DX1RAE','雅马哈FG3'];
			
			function guitarAll(){
				
				var guitar = document.getElementById("guitar");
				for (var i in GuitarBrand){
					guitar.add(new Option(i,i));
					}
				}
			
			function connect(){
					var guitar = document.getElementById("guitar").value;
					var brand=document.getElementById("brand");
					brand.options.length = 0;
					
					for(var i in GuitarBrand){			
						if(i == guitar){
							for(var j in GuitarBrand[i]){
								brand.add(new Option(GuitarBrand[i][j],GuitarBrand[i][j]));
								}
							}
						}
					}
					window.οnlοad=guitarAll;
		</script>
	 
	</head>
	 
	<body>
		种类:   <select id="guitar" onclick="connect()">
					<option>种类</option>
					<option>合板</option>
					<option>面单</option>
					<option>全单</option>
				</select>
					<br><br>
		品牌:   <select id="brand">
					<option>品牌</option>
				</select>
	</body>
</html>

随便瞅瞅在这里插入图片描述