html:

<script src="js/city.js"></script>

......

<body>

    <div class="padding border-bottom">

      <ul class="search">

          <li>

           <select style="height:31px;border-radius: 3px;border: solid 1px #ddd;" id="province">

           </select>

          </li>

          <li id="city">

          </li>

          <li> <a class="button border-main icon-plus-square-o" href="javascript:void(0)" onclick="goaddcity()"> 添加</a> </li>

      </ul>

    </div>

</body>

city.js:

$(function(){

    //加载所有省市

    $("#province").html("");

    $("#city").html("");

    $.ajax({

        url: "js/city.json",

        type: "get",

        dataType: 'json',

        contentType: "application/json;charset=utf-8",

        success:function(data){

            if (data.success == true) {

                //i表示在data中的索引位置，n表示包含的信息的对象

                //省

                var province0 = '<option>----请选择省份----</option> ';

                $('#province').append(province0);

                //市

                var city0 =

                    '<select style="height:31px;border-radius: 3px;border: solid 1px #ddd;" class="city">'+

                    '    <option>----请选择城市----</option> '+

                    '</select> '

                ;

                $("#city").append(city0);

                $.each(data.data,function(i,n){

                    var name = n.name;

                    var province = '<option>'+name+'</option>';

                    $('#province').append(province);

                    if (n.regionCityList != null) {

                        var str = '<select style="height:31px;border-radius: 3px;border: solid 1px #ddd;" class="city">';

                        var cityarr = n.regionCityList;

                        for (var i=0;i<cityarr.length;i++){

                            str += '<option value="'+cityarr[i].code+'">'+cityarr[i].name+'</option>';

                        }

                        str += '</select>';

                        $('#city').append(str);

                    }

                });

              $(document).ready(function(){

                 $("#province").change(function(){

                   $("#province option").each(function(i,o){

                     if($(this).attr("selected")){

                       $(".city").hide();

                       $(".city").eq(i).show();

                       currentShowCity=i;

                     }

                   });

                 });

                 $("#province").change();

              });

            } 

        },

        error:function() {

            alert("error");

        }

    });

});
city.json(注意：city.json和city.js要在同一目录下，并且目录文件夹是js)
city.json下载地址： http://files.cnblogs.com/files/007sx/city.zip

js省市二级联动的更多相关文章

  1. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. js 省市二级联动

    <html> <head> <meta charset="UTF-8"> <title></title> </he ...

  3. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  4. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  5. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  6. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  7. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  8. JS制作二级联动

    JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  9. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

  1. STORM在线业务实践-集群空闲CPU飙高问题排查（转）

    最近将公司的在线业务迁移到Storm集群上,上线后遇到低峰期CPU耗费严重的情况.在解决问题的过程中深入了解了storm的内部实现原理,并且解决了一个storm0.9-0.10版本一直存在的严重bug ...

  2. Is "UNION ALL" Always Better Than "UNION"? Watch Out!

    无论是教科书还是平常的实践都告诉我们 - “尽量避免用UNION,尽可能用UNION ALL替代”. 原因很简单,UNION会对结果集进行排序去重操作,这是一个很消耗资源的操作. 但是,今天碰到了一个 ...

  3. C++11 容器Array

    array是一个固定大小的顺序容器,不能动态改变大小,array内的元素在内存中以严格的线性顺序存储与普通数组声明存储空间大小[]的方式是一样有效的,只是加入了一些成员函数和全局函数[get (arr ...

  4. 快速写excel的方法

    对于用com组件写excel,笔者表示那个太慢了.而且很耗资源,还要装excel. 今天我们就用写文本文件的方式来写excel. 步骤1,用excel写好一个设计一个我们想要的模板. 步骤2,我们把做 ...

  5. VC中的树形控件

    树形控件可以显示出各项之间的层次关系,因此在VC中很常用. 1.树形控件的常用风格 TVS_HASBUTTONS 在父项目前显示+.-.用户可以通过点击该符号来打开或收起子项 TVS_HASLINES ...

  6. Makefile学习之路——1

    编写makefile,不是一个猛子扎进去试着写一个规则并对之调试,而应该先采用面向依赖关系的思考方法勾勒出makefile要表达怎样的依赖关系,这一点尤为重要.通过不断地练习这种思考方法,才可能达到流 ...

  7. jfinal控制器添加多个拦截器

    @Before({a_Interecptor.class,b_Interecptor.class}) public class aaController(){ } 参考:http://www.cnbl ...

  8. ibtais中把clob数据类型转换成string并插入到数据库中

    1,在xml中定义一个parameterMap <parameterMap id="stringToClob" class="com.a.b.c"> ...

  9. ANSI文件操作

    ANSI文件操作 在ANSI C中,对文件的操作分为两种方式,即流式文件操作和I/O文件操作,下面就分别介绍之. 一.流式文件操作 这种方式的文件操作有一个重要的结构FILE,FILE在stdio.h ...

  10. 为WPF程序添加字体

    很多时候我们开发的程序可能会在多个版本的Windows上运行,比如XP.Win7.Win8. 为了程序美观,现在很多公司会使用WPF作为程序的界面设计. 跨版本的操作的操作系统往往有一些字体上的问题, ...