js小案例-省市级联

最新推荐文章于 2024-08-03 17:05:14 发布

你好鸭达可

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量169

点赞数 3

分类专栏：三剑客~ 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_59528719/article/details/136577885

版权

三剑客~ 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

运行效果：

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>省市级联</title>
		<style type="text/css">
					.regist_bg {
						width: 100%;
						height: 600px;
						padding-top: 40px;
						background-image: url(../img/bg.jpg);
					}
					.regist {
						border: 7px inset #ccc;
						width: 600px;
						padding: 40px 0;
						padding-left: 80px;
						background-color: #fff;
						margin-left: 25%;
						border-radius: 10px;
					}
					input[type="submit"] {
						background-color: aliceblue;
						width: 100px;
						height: 35px;
						color: red;
						cursor: pointer;
						border-radius: 5px;
					}
		</style>

	</head>
	<body>
		<div class="regist_bg">
			<div class="regist">
				<form action="#">
					<table width="600" height="350px">
						<tr>
							<td colspan="3">
								<font color="#3164af">会员注册</font> USER REGISTER
							</td>
						</tr>
						<tr>
							<td align="right">用户名</td>
							<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">密码</td>
							<td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">确认密码</td>
							<td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">Email</td>
							<td colspan="2"><input id="emailId" type="text" name="email" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">姓名</td>
							<td colspan="2"><input name="text" name="username" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">性别</td>
							<td colspan="2">
								<input type="radio" name="gender" value="男" checked="checked" />男
								<input type="radio" name="gender" value="女" />女
							</td>
						</tr>
						<tr>
							<td align="right">电话号码</td>
							<td colspan="2"><input type="text" name="phone" size="60" /> </td>
						</tr>
						<tr>
							<td align="right">所在地</td>
							<td colspan="3">								
								<select id="provinceId" style="width:150px">
									<option value="">----请-选-择-省----</option>
								</select>
								<select id="cityId" style="width:150px">
									<option value="">----请-选-择-市----</option>
								</select>
							</td>
						</tr>
						<tr>
							<td width="80" align="right">验证码</td>
							<td width="100"><input type="text" name="verifyCode" /> </td>
							<td><img src="../img/checkMa.png" /> </td>
						</tr>
						<tr>
							<td></td>
							<td colspan="2">
								<input type="submit" value="注册" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
<!--
省市级联
	1. 页面加载完成后自动装载省数据
	2. 当选中省时,装载该省的市数据
-->
		<script type="text/javascript">
			//准备省市数据
			let provinceData = ["北京","河北","辽宁"];
			let cityData = {
				"北京":["顺义区","昌平区","朝阳区"],
				"河北":["保定","石家庄","廊坊"],
				"辽宁":["沈阳","铁岭","抚顺"]
			};
			// 1. 页面加载完成后自动装载省数据
			let province = document.querySelector("#provinceId");//获取省
			window.onload = function(){
				for(let prov of provinceData){
					let option = document.createElement("option");//创建option标签
					option.value = prov;
					option.innerText = prov;
					province.appendChild(option);//给省追加选项
				}
			}
			// 2. 当选中省时,装载该省的市数据
			let city = document.querySelector("#cityId");//获取市
			province.onchange = function(){
				let provinceStr = this.value;
				console.log(provinceStr);//当前选中的省
				let currentCityData = cityData[provinceStr];//当前的市
				city.innerHTML = '<option value="">----请-选-择-市----</option>';//初始化市
				for(let cit of currentCityData){
					let option = document.createElement("option");//创建option标签
					option.value = cit;
					option.innerText = cit;
					city.appendChild(option);//给省追加选项
				}

			}

		</script>

	</body>
</html>

欢迎大家指点评论~ 点赞+关注⭐⭐⭐

你好鸭达可

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js小案例-省市级联

运行效果：代码演示：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>省市级联</title> <style type="text/css"> .regist_bg { width: 100%; height: 600px; padding-top: 40px; ba
复制链接

扫一扫

专栏目录