bootstrap的区域选择器

bootstrap-chinese-region

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

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

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

例子

Example

html结构

  1. <head>
  2. <link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
  3. <link rel="stylesheet" href="lib/bootstrap-chinese-region/bootstrap-chinese-region.css">
  4. <head/>
  6. <div class="form-group">
  7. <label for="address">地区 </label>
  8. <div class="bs-chinese-region flat dropdown" data-submit-type="id" data-min-level="1" data-max-level="3">
  9. <input type="text" class="form-control" name="address" id="address" placeholder="选择你的地区" data-toggle="dropdown" readonly="" value="440103">
  10. <div class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  11. <div>
  12. <ul class="nav nav-tabs" role="tablist">
  13. <li role="presentation" class="active"> <a href="#province" data-next="city" role="tab" data-toggle="tab">省份 </a></li>
  14. <li role="presentation"> <a href="#city" data-next="district" role="tab" data-toggle="tab">城市 </a></li>
  15. <li role="presentation"> <a href="#district" data-next="street" role="tab" data-toggle="tab">县区 </a></li>
  16. </ul>
  17. <div class="tab-content">
  18. <div role="tabpanel" class="tab-pane active" id="province">-- </div>
  19. <div role="tabpanel" class="tab-pane" id="city">-- </div>
  20. <div role="tabpanel" class="tab-pane" id="district">-- </div>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  27. <script type="text/javascript" src="lib/jquery/jquery.js"> </script>
  28. <script type="text/javascript" src="lib/bootstrap/bootstrap.js"> </script>
  29. <script type="text/javascript" src="lib/bootstrap-chinese-region/bootstrap-chinese-region.js"> </script>

js代码

  1. <script type="text/javascript">
  2. $.getJSON( 'lib/bootstrap-chinese-region/sql_areas.json' , function(data) {
  4. /**重定义数据结构**/
  5. /**
  6. * id 键,name 名字,level 层级,parentId 父级
  7. */
  8. for ( var i = 0 ; i < data.length; i++) {
  9. var area = {id:data[i].id,name:data[i].cname,level:data[i].level,parentId:data[i].upid};
  10. data[i] = area;
  11. }
  13. $( '.bs-chinese-region' ).chineseRegion( 'source' ,data); //导入数据并实例化
  14. });
  15. </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事件

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

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

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

其他

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

  1. data-submit- type= "id" //设置id，提交表单时会自动把input的值改为层级最下层的地区id
  2. data-min-level= "1" //设定最上层
  3. data-max-level= "3" //设定最下层
posted @   码海兴辰  阅读(386)  评论(0)  编辑  收藏  举报
相关博文：
·  bootstrap省市联动下拉控件的使用
·  bootstrap实现树形菜单显示，联动数据
·  （学习日记）三、BootSrap-JavaScript
·  bootstrap-select组件
·  Bootstrap4带多选功能输入框组件
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示
SQL AI 助手