基于bootstrap的中国地区（行政区）选择器

﹏ヽ暗。殇╰゛Y 2022-07-16 15:19 295阅读 0赞

# bootstrap-chinese-region #

基于bootstrap的中国地区（行政区）选择器

真心不错，故不敢独享，此以分与大家

https://coding.net/u/packy/p/bootstrap-chinese-region/git/tree/master

## 例子 ##

[Example][]

html结构

<head>
        <link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
        <link rel="stylesheet" href="lib/bootstrap-chinese-region/bootstrap-chinese-region.css">
    <head/>
    
    <div class="form-group">
        <label for="address">地区</label>
        <div class="bs-chinese-region flat dropdown" 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="440103">
            <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>
    
    <script type="text/javascript" src="lib/jquery/jquery.js"></script>
    <script type="text/javascript" src="lib/bootstrap/bootstrap.js"></script>
    <script type="text/javascript" src="lib/bootstrap-chinese-region/bootstrap-chinese-region.js"></script>

js代码

<script type="text/javascript"> $.getJSON('lib/bootstrap-chinese-region/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);//导入数据并实例化 }); </script>

## 方法 ##

显示（或隐藏）下拉框 `$('.bs-chinese-region').chineseRegion('toggle')`

导入数据 `$('.bs-chinese-region').chineseRegion('source',data)`

取得数据 `$('.bs-chinese-region').chineseRegion('source')`

设置地区有效层级（显示与获得的地区层级范围） `$('.bs-chinese-region').chineseRegion('level',min,max)`

重绘地区选择器 `$('.bs-chinese-region').chineseRegion('render',id)`

> 传入id 则自动选择层级范围内的id地区及父级地区 没传入id 则重绘地区层级范围最小地区

## 事件 ##

当选择了地区后促发`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" //设定最下层

[Example]: http://bootstrap-chinese-region.coding.io/

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

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

相关阅读

相关 Element UI 中国省市区级联选择器

目录 1.安装 2.说明 3.示例 -------------------- 1.安装 npm install element-china-area-d

迷南。/ 2023年09月27日 13:58/ 0 赞/ 100 阅读

相关中国行政区县GPS坐标

var areas = [ {"code":"110000","parentCode":"0","level":"1","name":"北京市","latitude":

àì夳堔傛蜴生んèń/ 2022年08月19日 14:19/ 0 赞/ 147 阅读

相关基于bootstrap的中国地区（行政区）选择器

bootstrap-chinese-region 基于bootstrap的中国地区（行政区）选择器真心不错，故不敢独享，此以分与大家 https://coding.

﹏ヽ暗。殇╰゛Y/ 2022年07月16日 15:19/ 0 赞/ 296 阅读

相关 android地区三级联动选择

地区三级联动选择一个Activity 2个Fragment，在Activity中一次添加Fragment显示省级、市级、县级的列表。 Activi

Myth丶恋晨/ 2022年07月14日 13:15/ 0 赞/ 133 阅读

相关【ionic3】地区选择器

1、安装 `ion-multi-picker` npm install ion-multi-picker --save 2、导入 `app.module.ts

朱雀/ 2022年05月29日 05:36/ 0 赞/ 249 阅读

相关 vue-非常好用的地区选择

[https://distpicker.pigjian.com/][https_distpicker.pigjian.com]![在这里插入图片描述][watermark_ty

谁践踏了优雅/ 2022年04月24日 14:54/ 0 赞/ 196 阅读

相关中国地区Mysql数据表

[省市区 Mysql 数据库表][Mysql] 1、excel表格数据 2、china.php代码文件 3、chian.sql文件获取方式：https://pan

秒速五厘米/ 2022年01月12日 00:37/ 0 赞/ 301 阅读

相关 VUE-地区选择器(V-Distpicker)

V - Distpicker 地区选择器环境问题不多说,自己看文档,主要讲一下在实际使用过程中如何将下拉框的值赋值到对象属性上. 文档: https://distpi

淩亂°似流年/ 2022年01月06日 09:09/ 0 赞/ 272 阅读

相关 Bootstrap 时长选择器(依赖bootstrap的下拉菜单组件)

前言日期时间选择器可以直接使用bootstrap-datetimepicker.js插件，但是却很难找到好用的时长选择器，什么是时长选择器呢？时间选择器和时长选择器的区别：

深藏阁楼爱情的钟/ 2021年12月08日 20:47/ 0 赞/ 477 阅读

相关一个开源、美观的日期选择器(bootstrap datepicker)

`bootstrap-datepicker`是一个开源、基于`bootstrap`的日期选择器，内置60+种语言，基于`bootstrap`也使得选择器非常美观适合现代网站，功

水深无声/ 2021年06月26日 16:06/ 0 赞/ 516 阅读