JavaScript学习——使用JS完成省市二级联动
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>
在谷歌浏览器内运行，实现了需求中的效果。
JavaScript学习——使用JS完成省市二级联动的更多相关文章
- 用原生JS写省市二级联动
HTML代码 <select id="s1"> <option value="0">~请选择省份~</option> < ...
- 用JS实现省市二级联动
一.需求分析 我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 二.技术分析 使用事件(onchange) 使用一个二 ...
- 省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- 省市二级联动（原生JS）
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...
- 微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- Mybatis + js 实现下拉列表二级联动
Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...
随机推荐
- BZOJ 3729 splay维护DFS序+博弈论
思路: 这像是 阶梯Nim之类的东西 我们 直接把sg函数 设成mod(L+1)的 一棵子树 向下的奇数层上的石子xor起来 就是答案 有加点和改值的操作 就splay维护一下 //By Sirius ...
- CentOS 安装 PHP 扩展
下载地址:https://pecl.php.net/package/redis 上传目录:/usr/local/src //安装依赖 yum install php-devel -y //进入安装包目 ...
- iOS 11 APP 设计中的几个 UI 设计细节
Apple 官网看了 iOS 11 的介绍,发现有不少的更新哦,比如控制中心.Siri.Live Photo 等等,总体来说都有很多不错的体验,不过本文不介绍功能,只说视觉界面. 在 iOS 11 的 ...
- 关于获取WebForm控件的问题
遇到这样的一个问题: 在GridView加载了数据之后,GridView的个别列被设置为TextBox单元格,就是可以修改数量了,单价什么的: 这样就触发了TextChanged事件: 现在要记录谁修 ...
- Android琐碎知识点集合
1.最近发现android studio更新之后用的v7包,每次创建Activity的时候自动继承的是AppCompatActivity,很不舒服,还是习惯Activity.没什么大的毛病,毕竟goo ...
- Thingworx SDK开发自定义Widget
Thingworx自带的图表数量有限,样式也很有限,在echarts上看到了这样一个非常简单的图表,下面将做一个简单的静态引入示范 首先创建Thingworx项目 然后右键ui新建widget 自动生 ...
- POSIX Threads
POSIX Threads, usually referred to as pthreads, is an execution model that exists independently from ...
- JDBC程序实例
实例 ( Statement ): public class JDBC { public static void main(String[] args) throws Exception { Conn ...
- IDEA创建Maven工程依赖jar包爆红问题
使用IDEA创建maven工程后,在pom.xml文件中添加jar包坐标依赖后报错, 如图:
- node——进阶版服务器根据不同请求作出不同响应+响应html文件等文件
文件目录结构如下 resource文件里面放了css文件和图片等,view文件里面是html文件 <!DOCTYPE html> <html lang="en"& ...