bootstrap的中国地区选择器

github下载地址

https://coding.net/u/packy/p/bootstrap-chinese-region/git?public=true

只需要example下的lib文件夹即可

（最开始引入的是dist文件下的文件，结果报错了，具体原因没有详查，就直接用官方demo里的文件，结果成功了，所以下载下来的时候，拿到lib文件夹就可以拍屁股走了）

 

不多说，基本的jquery和bootstrap的css and js得引入吧。

<link rel="stylesheet" href="/Public/adminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">

<script src="/Public/adminLTE/bower_components/jquery/dist/jquery.min.js"></script>

<script src="/Public/adminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

以上三个文件都是在公共模板引入过的，所以当前页只需要引入地区插件的css 和js

<link rel="stylesheet" href="/Public/adminLTE/bootstrap-chinese-region-master/example/lib/bootstrap-chinese-region/bootstrap-chinese-region.css">

<script src="/Public/adminLTE/bootstrap-chinese-region-master/example/lib/bootstrap-chinese-region/bootstrap-chinese-region.js"></script>

 

HTML代码

<div class="form-group">
   <label class="col-sm-2 control-label" for="address">地区</label>
   <div class="bs-chinese-region flat dropdown col-sm-6" data-submit-type="id" data-min-level="1" data-max-level="3">
      <input type="text" class="form-control" name="address" id="address" placeholder="选择你的地区" data-toggle="dropdown" readonly="" value="{$detail['addressnum']}">
      <div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <div>
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active">
             <a href="#province" data-next="city" role="tab" data-toggle="tab">省份</a> 
          </li>
          <li role="presentation">
             <a href="#city" data-next="district" role="tab" data-toggle="tab">城市</a> 
          </li>
          <li role="presentation">
             <a href="#district" data-next="street" role="tab" data-toggle="tab">县区</a>
          </li>
        </ul>
        <div class="tab-content">
           <div role="tabpanel" class="tab-pane active" id="province">--</div>
           <div role="tabpanel" class="tab-pane" id="city">--</div>
           <div role="tabpanel" class="tab-pane" id="district">--</div>
        </div>
      </div>
      </div>
   </div>
</div>

javascript代码

<script type="text/javascript">
  $.getJSON('/Public/adminLTE/bootstrap-chinese-region-master/dist/sql_areas.json',function(data){

     /**重定义数据结构**/
     //id 键,name 名字,level 层级,parentId 父级
     
     for (var i = 0; i < data.length; i++) {
       var area = {id:data[i].id,name:data[i].cname,level:data[i].level,parentId:data[i].upid};
       data[i] = area;
     }

     $('.bs-chinese-region').chineseRegion('source',data);//导入数据并实例化
     $('.bs-chinese-region').chineseRegion('source',data).on('completed.bs.chinese-region',function(e,areas){
       //areas是已选择的地区数据，按先选择的在最前的方式排序。

       console.log(e);
       console.log(areas);
     });
  });
</script>

就可以看到这样的效果了

在存数据库的时候，只需要存储第三级地区的id， 传入 input的value内  地区会自动查找上级并显示

 

其他事件

当选择了地区后促发changed.bs.chinese-region事件

$('.bs-chinese-region').chineseRegion('source',data).on('changed.bs.chinese-region',function(e,areas){
    //areas是已选择的地区数据，按先选择的在最前的方式排序。
});

当选择了最后的层级地区后促发completed.bs.chinese-region事件

$('.bs-chinese-region').chineseRegion('source',data).on('completed.bs.chinese-region',function(e,areas){
    //areas是已选择的地区数据，按先选择的在最前的方式排序。
});

 在bs-chinese-region元素中设置以下data-属性会自动加载内容

data-submit-type="id" //设置id，提交表单时会自动把input的值改为层级最下层的地区id
data-min-level="1" //设定最上层
data-max-level="3" //设定最下层