MyException - 我的异常网
当前位置:我的异常网» jQuery » jQuery学习(6)——使用JQ完成省市二级联动

jQuery学习(6)——使用JQ完成省市二级联动

www.MyException.Cn  网友分享于:2013-09-07  浏览:0次
jQuery学习(六)——使用JQ完成省市二级联动

1、JQ的遍历操作

方式一:

 1       $(function(){
 2                 //全选/全不选
 3                 $("#checkallbox").click(function(){
 4                     var isChecked=this.checked;
 5                     //使用对象访问的方式进行遍历,语法$().each(function(){})
 6                     $("input[name='hobby']").each(function(){
 7                         this.checked=isChecked;
 8                     });
 9                 });
10             });

$后面的括号里是被遍历的对象,是一个集合。

方式二:

1 $.each( [0,1,2] , function(i , n ){
2   alert( "Item #" + i + ": " + n );
3 });

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、具体代码实现:

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>注册页面重新布局</title>
  6         <style type="text/css">
  7             #contanier{
  8                 border: 1px solid red;
  9                 width: 99%;
 10                 height: 600px;
 11                 position: relative;
 12             }
 13             #content{
 14                 border: 5px solid gray;
 15                 width: 50%;
 16                 height: 60%;
 17                 position: absolute;
 18                 top: 100px;
 19                 left: 300px;
 20                 background-color: white;
 21                 padding-top: 50px;
 22             }
 23         </style>
 24         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
 25         <script>
 26             $(function(){
 27                 //2.创建一个二维数组用于存储省份和城市
 28                 var cities=new Array(3);
 29                 cities[0]=new Array("武汉市","宜昌市","黄冈市","襄阳市");
 30                 cities[1]=new Array("长沙市","岳阳市","株洲市","郴州市");
 31                 cities[2]=new Array("石家庄市","邯郸市","廊坊市","保定市");
 32                 cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");
 33                 
 34                 $("#province").change(function(){
 35                     //10.清除第二个下拉列表
 36                     $("#city").empty();
 37                     
 38                     //1.获取用户选择的省份
 39                     var val=this.value;
 40                     //alert(val);
 41                     //3.遍历二维数组中的省份
 42                     $.each(cities,function(i,n){
 43                         //alert(i+":"+n);
 44                         //判断用户选择的省份和遍历的省份
 45                         if(val==i){
 46                             //5.遍历该省份下的所有城市
 47                             $.each(cities[i],function(j,m){
 48                                 //alert(m);
 49                                 //6.创建城市文本节点
 50                                 var textNode=document.createTextNode(m);
 51                                 //7.创建option元素节点
 52                                 var opEle=document.createElement("option");
 53                                 //8.将城市文本节点添加到option元素节点中去
 54                                 $(opEle).append(textNode);          //opEle前加$是为了将DOM对象转换成JQuery对象
 55                                 //9.将option元素节点追加到第二个下拉列表中
 56                                 $("#city").append($(opEle));
 57                             });
 58                         }
 59                     });
 60                 });
 61             });
 62         </script>
 63     </head>
 64     <body>
 65             <!--中间注册表单部分div-->
 66             <div id="contanier">
 67                 <div id="content">
 68                     <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
 69                         <form method="get" action="#" onsubmit="return checkForm()">
 70                         <tr>
 71                             <td colspan="2" align="center">
 72                                 <font size="5">会员注册</font>
 73                             </td>
 74                             
 75                         </tr>
 76                         <tr>
 77                             <td>
 78                                 用户名
 79                             </td>
 80                             <td>
 81                                 <input type="text" name="username" id="username"/>
 82                             </td>
 83                         </tr>
 84                         <tr>
 85                             <td>密码</td>
 86                             <td>
 87                                 <input type="password" name="password" id="password"/>
 88                             </td>
 89                         </tr>
 90                         <tr>
 91                             <td>确认密码</td>
 92                             <td>
 93                                 <input type="password" name="repassword" />
 94                             </td>
 95                         </tr>
 96                         <tr>
 97                             <td>email</td>
 98                             <td>
 99                                 <input type="text" name="email" id="email" />
100                             </td>
101                         </tr>
102                         <tr>
103                             <td>姓名</td>
104                             <td>
105                                 <input type="text" name="name" />
106                             </td>
107                         </tr>
108                         <!--1.编写HTML文件部分的内容-->
109                         <tr>
110                             <td>籍贯</td>
111                             <td>
112                                 <!--2.确定事件,通过函数传参的方式拿到改变后的城市-->
113                                 <select id="province">
114                                     <option>--请选择--</option>
115                                     <option value="0">湖北</option>
116                                     <option value="1">湖南</option>
117                                     <option value="2">河北</option>
118                                     <option value="3">河南</option>
119                                 </select>
120                                 <select id="city">
121                                     
122                                 </select>
123                             </td>
124                         </tr>
125                         <tr>
126                             <td>性别</td>
127                             <td>
128                                 <input type="radio" name="sex" value="男"/>129                                 <input type="radio" name="sex" value="女"/>130                             </td>
131                         </tr>
132                         <tr>
133                             <td>出生日期</td>
134                             <td>
135                                 <input type="text" name="birthday" />
136                             </td>
137                         </tr>
138                         <tr>
139                             <td>验证码</td>
140                             <td>
141                                 <input type="text" name="yanzhengma" />
142                                 <img src="../img/yanzhengma.png" />
143                             </td>
144                         </tr>
145                         <tr>
146                             <td colspan="2" align="center">
147                                 <input type="submit" value="注册" />                                            
148                             </td>
149                         </tr>
150                         </form>
151                     </table>
152                 </div>
153             </div>
154         </div>
155     </body>
156 </html>

在谷歌浏览器内运行,效果如下:

文章评论

 程序员的样子
程序员的样子
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
为什么程序员都是夜猫子
为什么程序员都是夜猫子
总结2014中国互联网十大段子
总结2014中国互联网十大段子
我的丈夫是个程序员
我的丈夫是个程序员
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
10个调试和排错的小建议
10个调试和排错的小建议
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
老程序员的下场
老程序员的下场
程序员必看的十大电影
程序员必看的十大电影
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
旅行,写作,编程
旅行,写作,编程
编程语言是女人
编程语言是女人
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员应该关注的一些事儿
程序员应该关注的一些事儿
我是如何打败拖延症的
我是如何打败拖延症的
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
Java程序员必看电影
Java程序员必看电影
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
那些争议最大的编程观点
那些争议最大的编程观点
程序员的鄙视链
程序员的鄙视链
程序员都该阅读的书
程序员都该阅读的书
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
一个程序员的时间管理
一个程序员的时间管理
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
如何成为一名黑客
如何成为一名黑客
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
代码女神横空出世
代码女神横空出世
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员和编码员之间的区别
程序员和编码员之间的区别
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有