省市关联
1. 主要功能
- 页面加载完成后自动装载省数据；
- 当选中省时，装载对应该省的市数据。
2. 代码实现
<!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>
<script type="text/javascript">
let provinceData = ["北京", "河北", "辽宁"];
let cityData = {
"北京": ["顺义区", "昌平区", "朝阳区"],
"河北": ["保定", "石家庄", "廊坊"],
"辽宁": ["沈阳", "铁岭", "抚顺"]
};
let provinceId = document.querySelector("#provinceId");
let cityId = document.querySelector("#cityId");
window.onload = function () {
for (let p of provinceData) {
provinceId.innerHTML += "<option value='" + p + "'>" + p + " </option>";
}
};
provinceId.onchange = function(){
cityId.innerHTML = '<option value="">----请-选-择-市---- </option>';
console.log(this.value);
let citys = cityData[this.value];
for(let c of citys){
cityId.innerHTML += "<option value='"+c+"'>"+c+" </option>";
}
};
</script>
</body>
</html>
- 展示效果：
原文链接：https://qwert.blog.csdn.net/article/details/105356257
