天天看点

js原生实现城市联动

城市数据:

js原生实现城市联动
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			用户名:<input type="text" name="username" value="sish" /><br>
			密码:<input type="password" name="password" value="" /><br>
			爱好:
			<input type="checkbox" name="hobby" value="1" />篮球
			<input type="checkbox" name="hobby" value="2" />足球
			<input type="checkbox" name="hobby" value="3" />乒乓球
			<input type="checkbox" name="hobby" value="4" />羽毛球
			<input type="checkbox" name="hobby" value="5" />网球
			<br>
			性别:
			<input type="radio" name="sex" value="1" />男
			<input type="radio" name="sex" value="0" />女
			<br>
			籍贯:
			<select>
				<option value ="0">==请选择省份==</option>
			</select>
			<select>
				<option value ="0">==请选择城市==</option>
			</select>
			<br>
			自我介绍:
			<textarea rows="20" cols="100">
						</textarea>
			<br>

			<!-- 			<button type="button">注册</button>
					<button type="button">重置</button> -->
			<input type="submit" value="注册" />
			<input type="reset" />
		</form>
		
		
		<script src="03-select框-联动数据.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			 var sel = document.getElementsByTagName("select")[0];

			 for(var i=0;i<menu.length;i++){
				 sel.innerHTML+=`<option value=${menu[i].pid}>${menu[i].name}</option>`
			 }

			 sel.onchange = function(){
				 var city = document.getElementsByTagName("select")[1];
				 city.innerHTML="<option>==请选择城市==</option>";
				 for(var i=0;i<menu.length;i++){
					if(this.value==menu[i].pid){
						for(var j=0;j<menu[i].children.length;j++){
                             city.innerHTML+=`<option value=${menu[i].children[j].cid}>${menu[i].children[j].name}</option>`
						}
					}
				 }
			 }


		</script>
	</body>
</html>

           

继续阅读