jQuery学习(六)——使用JQ完成省市二级联动
1、JQ的遍历操作
方式一：
1 $(function(){
//全选/全不选
$("#checkallbox").click(function(){
var isChecked=this.checked;
//使用对象访问的方式进行遍历，语法$().each(function(){})
$("input[name='hobby']").each(function(){
this.checked=isChecked;
});
});
});
$后面的括号里是被遍历的对象，是一个集合。
方式二：
$.each( [0,1,2] , function(i , n ){
alert( "Item #" + i + ": " + n );
});
each后面的中括号是被遍历的对象
function后面的i是角标，n是被遍历后的内容。
2、文档处理操作
追加内容
apend: A.append(B) 将B追加到A的内容的末尾处
appendTo: A.appendTo(B) 将A加到B内容的末尾处。
3、步骤分析：
第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份
第二步：创建二维数组来存储省份和城市
第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
第四步：接着遍历数组中的城市
第五步：创建一个城市文本节点
第六步：创建option元素节点
第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】
第八步：获取第二个下拉列表并将option元素节点添加进去
第九步：清除第二个下拉列表的option内容
4、具体代码实现：
<!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 type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2.创建一个二维数组用于存储省份和城市
var cities=new Array(3);
cities[0]=new Array("武汉市","宜昌市","黄冈市","襄阳市");
cities[1]=new Array("长沙市","岳阳市","株洲市","郴州市");
cities[2]=new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3]=new Array("郑州市","洛阳市","开封市","安阳市"); $("#province").change(function(){
//10.清除第二个下拉列表
$("#city").empty(); //1.获取用户选择的省份
var val=this.value;
//alert(val);
//3.遍历二维数组中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//判断用户选择的省份和遍历的省份
if(val==i){
//5.遍历该省份下的所有城市
$.each(cities[i],function(j,m){
//alert(m);
//6.创建城市文本节点
var textNode=document.createTextNode(m);
//7.创建option元素节点
var opEle=document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode); //opEle前加$是为了将DOM对象转换成JQuery对象
//9.将option元素节点追加到第二个下拉列表中
$("#city").append($(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 id="province">
<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>
在谷歌浏览器内运行，效果如下：
jQuery学习(六)——使用JQ完成省市二级联动的更多相关文章
- jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...
- 省市二级联动（原生JS）
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- 省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
- 微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- jQuery 1.3.2 简单实现select二级联动
jQuery 1.3.2 简单实现select二级联动 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
- jq简单城市二级联动实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Spark RDD概念学习系列之Pair RDD的action操作
不多说,直接上干货! Pair RDD的action操作 所有基础RDD 支持的行动操作也都在pair RDD 上可用
- GIT 常用方法
代码提交顺序: conmmit(提交代码到本地仓库) --->>> pull(将本地仓库代码合并) ---->>> push(将本地合并后的代码提交到 ...
- sql导出到excel
1.先查询数据ID,别名 导出到excel 2.增加标准名称,标识错误数据,导入sqlServer select distinct [StandardName] from [GMSOA].[dbo] ...
- iOS11即将到来，让我们具体了解下
谷歌开发者大会后,苹果的WWDC终于也要来了,目前准确时间已经确定. 近日,苹果官方发出的公告显示,WWDC 2017将在北京时间6月6日凌晨1点正式进行,同时他们强调会进行现场直播,用户可以在苹果主 ...
- 深入剖析 iOS 性能优化
问题种类 时间复杂度 在集合里数据量小的情况下时间复杂度对于性能的影响看起来微乎其微.但如果某个开发的功能是一个公共功能,无法预料调用者传入数据的量时,这个复杂度的优化显得非常重要了.上图列出了各种情 ...
- CDR 2017压感笔和压感设备该怎么设置使用?
您可以通过CorelDRAW 2017 中的以下工具来运用压感笔.笔或其他设备的压力:艺术笔(表达模式).橡皮擦.涂抹.转动.吸引.排斥.粗糙和弄脏.此外,您还可以通过艺术笔(表达模式)工具.橡皮擦. ...
- WebAssembly学习(二)：Windows10下WebAssembly C/C++编译环境的搭建与Hello World尝试
首先,不论是在Windows.Linux还是Mac上,Webassembly的编译都是主要依赖于Emscripten SDK这个工具的.但是,在这里必须要吐槽一下,不论是WebAssembly官网.W ...
- Qt编程—去掉标题栏和设置窗口透明用法
学习Qt编程,有时候我们很想做出好看又比较炫的画面,这时就常用到qt上的一些技巧. 这里我以一个小例子来展示qt的这些技巧,此qt编程写的,如图:(去掉标题栏和设置窗口透明后) 代码实现部分: .h文 ...
- 紫书 习题7-8 UVa 12107 (IDA*)
参考了这哥们的博客 https://blog.csdn.net/hyqsblog/article/details/46980287 (1)atoi可以char数组转int, 头文件 cstdlib ...
- 【codeforces 500E】New Year Domino
[题目链接]:http://codeforces.com/problemset/problem/500/E [题意] 有n个多米诺骨牌; 你知道它们的长度; 然后问你,如果把第i骨牌往后推倒,然后要求 ...