您的位置：首页 > Web前端 > JavaScript

JavaScript学习——使用JS完成省市二级联动

2017-08-21 22:10 495 查看

1、我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。显示的效果如下：

2、步骤分析：

第一步：确定事件(onchange)并为其绑定一个函数

第二步：创建一个二维数组用于存储省份和城市

第三步：获取用户选择的省份

第四步：遍历二维数组中的省份

第五步：将遍历的省份与用户选择的省份比较

第六步：如果相同，遍历该省份下所有的城市

第七步：创建城市文本节点

第八步：创建option元素节点

第九步：将城市文本节点添加到option元素节点中去

第十步：获取第二个下拉列表，并将option元素节点添加进去

第十一步：每次操作前清空第二个下拉列表的option内容。

3、具体代码实现：（只实现了籍贯功能）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面重新布局</title>
<style type="text/css">
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}
</style>

<script>
//1.创建一个二维数组用于存储
var cities=new Array(3);
cities[0]=new Array("武汉市","宜昌市","黄冈市","襄阳市");
cities[1]=new Array("长沙市","岳阳市","株洲市","郴州市");
cities[2]=new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");

function changeCity(val){

//7.获取第二个下拉列表
var cityEle=document.getElementById("city");

//9.清空第二个下拉列表的option内容
cityEle.options.length=0;

//2.遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
if(val==i){                                       //注意！！比较的是角标
//3.遍历用户选择的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.创建城市的文本节点
var textNode=document.createTextNode(cities[i][j]);
//5.创建option元素节点
var opEle=document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
</head>
<body>
<!--中间注册表单部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>

</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.编写HTML文件部分的内容-->
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">

</select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>
</div>
</body>
</html>

在谷歌浏览器内运行，实现了需求中的效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航