jQuery完成省市二级联动

超、凢脫俗 2022-04-06 08:20 438阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>使用jQuery完成省市二级联动</title>
  6.         <style type="text/css">
  7.             .top{
  8.                 border: 1px solid red;
  9.                 width: 32.9%;
  10.                 height: 50px;
  11.                 float: left;
  12.             }
  14.             #clear{
  15.                 clear: both;
  16.             }
  17.             #menu{
  18.                 border: 1px solid blue;
  19.                 width: 99%;
  20.                 height: 40px;
  21.                 background-color: black;
  22.             }
  23.             #menu ul li{
  24.                 display: inline;
  25.                 color: white;
  26.                 font-size: 19px;
  27.             }
  28.             #bottom{
  29.                 text-align: center;
  30.             }
  31.             #contanier{
  32.                 border: 1px solid red;
  33.                 width: 99%;
  34.                 height: 600px;
  35.                 background: url(../img/regist_bg.jpg);
  36.                 position: relative;
  37.             }
  38.             #content{
  39.                 border: 5px solid gray;
  40.                 width: 50%;
  41.                 height: 60%;
  42.                 position: absolute;
  43.                 top: 100px;
  44.                 left: 300px;
  45.                 background-color: white;
  46.                 padding-top: 50px;
  47.             }
  49.         </style>
  50.         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  51.         <script>
  52.             $(function(){
  53.                 //2.创建二维数组用于存储省份和城市
  54.                 var cities = new Array(3);
  55.                 cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
  56.                 cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
  57.                 cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
  58.                 cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
  60.                 $("#province").change(function(){
  61.                     //10.清除第二个下拉列表的内容
  62.                     $("#city").empty();
  64.                     //1.获取用户选择的省份
  65.                     var val = this.value;
  66.                     //alert(val);
  67.                     //3.遍历二维数组中的省份
  68.                     $.each(cities,function(i,n){
  69.                         //alert(i+":"+n);
  70.                         //4.判断用户选择的省份和遍历的省份
  71.                         if(val==i){
  72.                             //5.遍历该省份下的所有城市
  73.                             $.each(cities[i], function(j,m) {
  74.                                 //alert(m);
  75.                                 //6.创建城市文本节点
  76.                                 var textNode = document.createTextNode(m);
  77.                                 //7.创建option元素节点
  78.                                 var opEle = document.createElement("option");
  79.                                 //8.将城市文本节点添加到option元素节点中去
  80.                                 $(opEle).append(textNode);
  81.                                 //9.将option元素节点追加到第二个下拉列表中去
  82.                                 $(opEle).appendTo($("#city"));
  83.                             });
  84.                         }
  85.                     });
  87.                 });
  88.             });
  89.         </script>
  91.     </head>
  92.     <body>
  93.         <div>
  95.             <!--1.logo部分的div-->
  96.             <div>
  97.                 <!--切分为3个小的div-->
  98.                 <div class="top">
  99.                     <img src="../img/logo2.png" height="47px"/>
  100.                 </div>
  101.                 <div class="top">
  102.                     <img src="../img/header.png" height="47px"/>
  103.                 </div>
  104.                 <div class="top" style="padding-top: 15px;height: 35px;">
  105.                     <a href="#">登录</a>
  106.                     <a href="#">注册</a>
  107.                     <a href="#">购物车</a>
  108.                 </div>
  109.             </div>
  110.             <!--清除浮动-->
  111.             <div id="clear">
  113.             </div>
  114.             <!--2.导航栏部分的div-->
  115.             <div id="menu">
  116.                 <ul>
  117.                     <li >首页</li>
  118.                     <li >电脑办公</li>
  119.                     <li >手机数码</li>
  120.                     <li >孕婴保健</li>
  121.                     <li >鞋靴箱包</li>
  122.                 </ul>
  123.             </div>
  124.             <!--3.中间注册表单部分div-->
  125.             <div id="contanier">
  126.                 <div id="content">
  127.                     <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
  128.                         <form method="get" action="#" onsubmit="return checkForm()">
  129.                         <tr>
  130.                             <td colspan="2" align="center">
  131.                                 <font size="5">会员注册</font>
  132.                             </td>
  134.                         </tr>
  135.                         <tr>
  136.                             <td>
  137.                                 用户名
  138.                             </td>
  139.                             <td>
  140.                                 <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
  141.                             </td>
  142.                         </tr>
  143.                         <tr>
  144.                             <td>密码</td>
  145.                             <td>
  146.                                 <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
  147.                             </td>
  148.                         </tr>
  149.                         <tr>
  150.                             <td>确认密码</td>
  151.                             <td>
  152.                                 <input type="password" name="repassword" />
  153.                             </td>
  154.                         </tr>
  155.                         <tr>
  156.                             <td>email</td>
  157.                             <td>
  158.                                 <input type="text" name="email" id="email" />
  159.                             </td>
  160.                         </tr>
  161.                         <tr>
  162.                             <td>姓名</td>
  163.                             <td>
  164.                                 <input type="text" name="name" />
  165.                             </td>
  166.                         </tr>
  167.                         <!--1.编写HTML文件部分的内容-->
  168.                         <tr>
  169.                             <td>籍贯</td>
  170.                             <td>
  171.                                 <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
  172.                                 <select id="province">
  173.                                     <option>--请选择--</option>
  174.                                     <option value="0">湖北</option>
  175.                                     <option value="1">湖南</option>
  176.                                     <option value="2">河北</option>
  177.                                     <option value="3">河南</option>
  178.                                 </select>
  179.                                 <select id="city">
  181.                                 </select>
  182.                             </td>
  183.                         </tr>
  184.                         <tr>
  185.                             <td>性别</td>
  186.                             <td>
  187.                                 <input type="radio" name="sex" value="男"/>男
  188.                                 <input type="radio" name="sex" value="女"/>女
  189.                             </td>
  190.                         </tr>
  191.                         <tr>
  192.                             <td>出生日期</td>
  193.                             <td>
  194.                                 <input type="text" name="birthday" />
  195.                             </td>
  196.                         </tr>
  197.                         <tr>
  198.                             <td>验证码</td>
  199.                             <td>
  200.                                 <input type="text" name="yanzhengma" />
  201.                                 <img src="../img/yanzhengma.png" />
  202.                             </td>
  203.                         </tr>
  204.                         <tr>
  205.                             <td colspan="2">
  206.                                 <input type="submit" value="注册" />                                            
  207.                             </td>
  208.                         </tr>
  209.                         </form>
  210.                     </table>
  211.                 </div>
  212.             </div>
  214.         </div>
  215.     </body>
  216. </html>

发表评论

表情：
评论列表 （有 0 条评论，438人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Java数组实现省市二级联动

    数组的强大之处毋庸置疑，今天我要写的是用一个一维数组和一个二维数组来实现一个省市二级联动的功能。 1.首先定义一个一维数组，用来存放34个省级行政区域；定义一个二维数组，用来

    淩亂°似流年淩亂°似流年/ 0 赞/ 507 阅读