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

最新推荐文章于 2024-05-30 09:44:57 发布

飞奔的大土豆

最新推荐文章于 2024-05-30 09:44:57 发布

阅读量1.2w

点赞数

分类专栏：前端技术文章标签： boostrap city choese

前端技术专栏收录该内容

27 篇文章 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" //设定最下层

飞奔的大土豆

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
基于bootstrap的中国地区（行政区）选择器

bootstrap-chinese-region基于bootstrap的中国地区（行政区）选择器真心不错，故不敢独享，此以分与大家https://coding.net/u/packy/p/bootstrap-chinese-region/git/tree/master例子Examplehtml结构head> link rel="s
复制链接

扫一扫

专栏目录