用Jquery简单封装一个可重复调用的省市级联动插件

前言：基于公司项目简单封装的一个省市联动组件，由于只涉及广东省内，故省份默认广东省，由于比较简单，自己可以重新改写插件（样式也可以自己定义）

效果图：

点击选择城市：

选择地区：

代码结构：

自定义样式：

.cascade-container>div{position: relative;float: left;font-size: 20px;margin-bottom: 30px}
.cascade-container .input-select{height: 20px;font-size: 20px;text-align: center;background-color: #eee;border: 1px solid #000;}
.cascade-container .list-select{position: absolute;top: 0;left: 0;width: 100%;padding: 0;text-align: center;margin: 0;background-color: #eee;z-index: 9;border: 1px #000 solid;display: none;}
.cascade-container li{list-style: none}

结构：

    <div id="cascade1" class="cascade-container"></div>
    <div id="cascade2" class="cascade-container"></div>

控制初始化：

       $(function(){
        $('#cascade1').cascade({
            url:'****'//自定义接口地址
        });
        $('#cascade2').cascade();
    })//需要几处省市联动就调用几次，注意id区分

代码解析：

根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：
1.通过$.extend()来扩展jQuery
2.通过$.fn 向Jquery添加新的方法
3.通过$.widget()应用Jquery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级Jquery部件的，该模式开发出来的部件带有很多Jquery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，这里不细说。

所以首先

$.fn.cascade = function(obj){} //往$.fn上面添加一个方法，方法名字是cascade，即插件名字

var init = this;//在这里面,this指的是用Jquery选中的元素 example :$('a'),则this=$('a')

为防止this作用域等问题，我们这里把this赋值给init

var defaults = {
        url : 'http://###'//默认接口地址
    };
var sets = $.extend({},defaults, obj);//当用户没有自定义参数时，则用默认参数

在处理插件参数的接收上，通常使用Jquery的extend方法，当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指定的值，未指定的参数使用插件默认值。

组织html结构：

     var html = '<div class="pro-wrap">'+
                    '<input type="text" readonly value="广东省" class="input-select"/>'+
                '</div>'+
                '<div class="city-wrap">'+
                    '<input type="text" readonly  value="请选择市" class="input-select"/>'+
                    '<ul id="city-list" class="list-select"></ul>'+
                '</div>'+
                '<div class="dist-wrap">'+
                    '<input type="text" readonly value="请选择区" class="input-select"/>'+
                    '<ul id="dist-list" class="list-select"></ul>'+
                '</div>';
    init.append(html);
    ajaxData(28240,'city-list');//city init

其中每次点击某个城市均会触法区域查询请求，如下：

function ajaxData(id,$select){
      $.ajax({
          type:"post",
          url:sets.url, //注意此处
          data:"parentId=" + id ,
          dataType:"json",
          success:function( data ){
              var obj = data.data,
                  htm ='' ;
              if(data.result == 1){
                  $.each(obj,function(i){
                      htm += '<li id="'+obj[i].id+'">'+obj[i].name+'</li>';
                  });
                  init.find('#'+$select+'').html(htm);
              }
          },
          error:function(){
              alert('网络繁忙');
          }
      })
  }

点击交互事件：（此处代码不够简洁，大家看下就行了。哈哈哈）

init.on('click','.input-select',function(){
    init.find('ul').hide();
    $(this).next('ul').show();
});
init.on('click','#city-list li',function(){
    init.find('.dist-wrap input').val('请选择区');
    var id = $(this).attr('id'),
        val = $(this).text();
    init.find('.city-wrap input').val(val).attr('id',id);
    init.find('ul').hide();
    ajaxData(id,'dist-list');
});
init.on('click','#dist-list li',function(){
    var id = $(this).attr('id'),
        val = $(this).text();
    init.find('.dist-wrap input').val(val).attr('id',id);
    init.find('ul').hide();
});