zoukankan      html  css  js  c++  java
  • jQuery 全国省市县三级联动

         最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件

    废话不多说,贴上代码:

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>下拉框</title>
     6 <script src="city.js"></script>
     7 <script src="jquery-1.11.3.js"></script>
     8 <style>
     9     div{
    10         width:500px;
    11         margin:0 auto;
    12         text-align:center;
    13     }
    14     select{
    15         width:100px;
    16     }
    17 </style>
    18 </head>
    19 <body>
    20 <div>
    21     <h1>全国省市县三级联动</h1>
    22     <select id="province">
    23         <option value="省份(市)">省份(市)</option>
    24     </select>
    25     <select id="city">
    26         <option value="市(区)">市(区)</option>
    27     </select>
    28     <select id="county">
    29         <option value="县、镇">县、镇</option>
    30     </select>
    31 </div>
    32 <script>
    33 var cityAll=city.citylist;
    34 $.each(cityAll,function(i,n){
    35     $("#province").append('<option value="'+ n.p + '">' + n.p + '</option>');
    36 }); 
    37 $("#province,#city").change(function(){
    38     if($(this).attr("id") == "province"){
    39         $("#city").html("").append('<option value="市(区)">市(区)</option>').next().html("").append('<option value="县、镇">县、镇</option>');
    40     }else{
    41         $("#county").html("").append('<option value="县、镇">县、镇</option>');
    42     }
    43     $.each(cityAll,function(j,k){
    44         if($("#province").val() == k.p){
    45             $.each(k.c,function(l,m){
    46                 $("#city").append('<option value="'+ m.n + '">' + m.n + '</option>');
    47                 if(m.a){
    48                     $("#county").show();
    49                     if($("#city").val() == m.n){
    50                         $.each(m.a,function(e,f){
    51                             $("#county").append('<option value="'+ f.s + '">' + f.s + '</option>');
    52                         });
    53                     }    
    54                 }else{
    55                     $("#county").hide();
    56                         
    57                 }
    58             });
    59         }
    60     });
    61 });
    62 
    63 </script>
    64 </body>
    65 </html>

    做出来的效果就是:

    全国省市县三级联动

    好吧 ,我试着把js什么的也导进去,发现没效果,如果有想看的可以去下面我的云盘里面下载,如果有什么好的建议,也欢迎大家提出
  • 相关阅读:
    ruby -- 修改rubymine的字体大小
    ruby -- 基础学习(二) 外键配置实现级联删除
    ruby -- 基础学习(一)项目文件夹说明
    ruby -- 问题解决(二)rails4.0create引起的ActiveModel::ForbiddenAttributesError错误
    ruby -- 问题解决(一)无法连接mysql数据库
    enumerate用法
    python文件调用
    第二天----列表、深浅拷贝、元组、字符串、算数运算、字典、while
    P1005 矩阵取数游戏(动态规划+高精度)
    P1242 新汉诺塔(搜索+模拟退火)
  • 原文地址:https://www.cnblogs.com/wanglei7175/p/5720768.html
Copyright © 2011-2022 走看看