基于bootstrap的地区三级联动组件

收藏
387 17755
SuperMan   ❀
SuperMan ❀ 2017-07-06 15:28:13
付费话题:0 积分
ITKEE社区V3.0.1版本更新,补丁包下载了解详情 , 获取ITKEE社区版本,快速授权了解详情

很多应用场景都会用到地区联动的功能

一样,很多人会用BootStrap前端框架

GIF.gif

如果上述两个条件你都满足了,恭喜你,你可能需要下面这款插件:

基于bootstrap的地区三级联动组件

 <div class="form-group">
      <label class="col-sm-2 control-label"><i>*</i>所在地址</label>
      <div class="col-sm-3">
         <select name="input_province" id="input_province" class="form-control">
             <option value="">--请选择--</option>
         </select>
      </div>
      <div class="col-sm-3">
          <select name="input_city" id="input_city" class="form-control">
              <option value=""></option>
          </select>
      </div>
      <div class="col-sm-3">
          <select name="input_area" id="input_area" class="form-control">
                <option value=""></option>
          </select>
      </div>
  </div>
$(function () {
        var html = "";
        $("#input_city").append(html); $("#input_area").append(html);
        $.each(pdata,function(idx,item){
            if (parseInt(item.level) == 0) {
                html += "" + item.names + "";
            }
        });
        $("#input_province").append(html);

        $("#input_province").change(function(){
            if ($(this).val() == "") return;
            $("#input_city option").remove(); $("#input_area option").remove();
            var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,2);
            var html = "--请选择--"; $("#input_area").append(html);
            $.each(pdata,function(idx,item){
                if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
                    html += "" + item.names + "";
                }
            });
            $("#input_city").append(html);
        });

        $("#input_city").change(function(){
            if ($(this).val() == "") return;
            $("#input_area option").remove();
            var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,4);
            var html = "--请选择--";
            $.each(pdata,function(idx,item){
                if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
                    html += "" + item.names + "";
                }
            });
            $("#input_area").append(html);
        });
});



然后页面引入下方提供的address.js文件就可以生效了。


当前内容需回复后查看
评论话题
提交
  1. 2018-07-06 13:40:57 回复
  1. gogogo攒

    2018-07-06 16:59:08 回复
  1. 【当前内容被和谐】

    2018-07-06 16:59:22 回复
    1. SuperMan ❀

      你很优秀!

      2018-07-06 17:03:22 回复
    1. @A

      历害害阿海

      2019-06-18 10:08:09 回复
  1. 后台呢?有吗

    2018-07-06 17:11:22 回复
    1. SuperMan ❀

      这个不需要有什么后台吧? 地址库在json文件里。如果想自己追求后台地区区域管理功能,可以自己拓展开发!

      2018-07-06 17:13:16 回复
    1. 仙友

      地址不是存于数据库里的吗

      2018-07-06 20:04:11 回复
    1. SuperMan ❀

      地址在云盘下载文件中,是json文件,如果需要使用sql文件,需要自己拓展开发

      2018-07-07 08:44:24 回复
    1. 梁辰美晶

      怎么下载js

      2019-05-10 13:02:07 回复
    1. 梁辰美晶

      找到啦,非常感谢作者提供

      2019-05-10 13:06:47 回复
  1. 2018-07-09 17:39:34 回复
  1. 看看

    2018-07-10 11:04:18 回复
  1. 赞赞赞

    2018-07-12 10:18:40 回复
  1. 666666666666666666强

    2018-07-18 16:51:29 回复
  1. 2018-07-18 17:41:57 回复
  1. 2018-07-20 14:15:57 回复
  1. 看看

    2018-07-20 15:30:19 回复
  1. 瞅瞅啥样

    2018-07-23 13:58:13 回复
  1. 不错

    2018-07-25 00:24:41 回复
  1. 2018-08-07 15:15:02 回复
  1. address.js谁有

    2018-08-14 17:46:11 回复
  1. 2018-08-16 16:54:53 回复
  1. 六六六六六六六六六六六六六六六六六六六六

    2018-08-22 09:59:31 回复
  1. 2018-08-22 11:16:58 回复
  1. 66666溜

    2018-08-27 17:14:51 回复
  1. 2018-08-30 08:50:38 回复
  1. 2018-09-02 17:38:48 回复
  1. 2018-09-04 10:05:15 回复
  1. 数据怎么下载呢?

    2018-09-04 23:30:14 回复
  1. 运行不了,检查js代码才发现错误一堆,要改很多地方,真是坑得一比。。

    2018-09-05 01:06:19 回复
    1. SuperMan ❀

      这么多人都在用的很OK,到你这里成了错误一堆,坑了一笔。好吧,一笔!

      2018-09-05 11:27:04 回复
  1. java牛逼

    2018-09-06 11:11:14 回复
  1. 奥术大师大所大所发送到

    2018-09-25 10:26:09 回复
  1. qq我要下载

    2018-09-25 15:49:14 回复
  1. 下着看看

    2018-09-27 02:22:19 回复
  1. 2018-09-29 08:41:10 回复
  1. 赞赞赞

    2018-10-12 19:34:07 回复
  1. 2018-10-16 09:23:19 回复
  1. 2018-10-16 16:19:51 回复
  1. address.js文件?

    2018-10-17 18:30:19 回复
  1. 看看哟

    2018-10-18 21:53:41 回复
  1. 赞赞赞

    2018-10-25 16:07:16 回复
  1. 先下载下来看看

    2018-10-31 15:34:25 回复
  1. 看看

    2018-11-06 17:54:33 回复
  1. 2018-11-10 14:51:04 回复
  1. 啦啦啦

    2018-11-10 20:43:40 回复
  1. 赞一个

    2018-11-11 11:49:21 回复
  1. 【当前内容被和谐】

    2018-11-13 13:12:26 回复
  1. 不错

    2018-11-14 14:49:04 回复
  1. 看看

    2018-11-21 10:25:13 回复
  1. 有个坑

    2018-11-21 10:53:11 回复
  1. 是事实是事实看

    2018-11-21 23:08:18 回复
  1. 2018-11-22 09:12:06 回复
  1. 太棒了

    2018-11-27 14:13:46 回复
  1. 2018-11-28 16:56:53 回复
  1. 2018-11-28 20:20:25 回复
  1. 很好

    2018-12-04 16:58:27 回复
  1. 2018-12-05 09:34:49 回复
  1. 66666牛

    2018-12-06 11:13:48 回复
  1. 好的

    2018-12-10 17:43:11 回复
  1. 从哪里抄来的

    2018-12-10 17:50:27 回复
  1. 2018-12-13 10:14:20 回复
  1. 2018-12-13 16:31:36 回复
  1. 2018-12-14 10:14:53 回复
  1. 为了看一下下面的文件。

    2018-12-21 09:41:30 回复
  1. 我的还是用不了呀,不知道是哪儿出了问题了。怎么联系一下你呀,???嘿嘿指导一下。

    2018-12-21 10:10:19 回复
  1. 拿下了 刚好需要

    2018-12-21 14:07:50 回复
  1. 【当前内容被和谐】

    2018-12-26 11:43:06 回复
  1. 1221还不错

    2018-12-28 14:31:10 回复
  1. 看看

    2019-01-04 10:13:19 回复
  1. 谢谢楼主分享

    2019-01-15 15:32:27 回复
  1. 叮叮叮叮

    2019-01-16 10:58:40 回复
  1. 需要

    2019-01-17 11:02:57 回复
  1. 2019-01-18 17:52:15 回复
  1. good很棒

    2019-01-22 19:42:28 回复
  1. 好大撒旦撒啊

    2019-01-23 11:57:08 回复
  1. 666很好非常好

    2019-02-06 17:33:38 回复
  1. 2019-02-18 11:54:55 回复
  1. 2019-02-19 14:44:16 回复
  1. 2019-02-21 02:18:10 回复
  1. 咱 看看

    2019-02-26 17:28:38 回复
  1. 2019-03-01 16:13:58 回复
  1. 赞赞

    2019-03-01 17:35:29 回复
  1. 2019-03-02 10:18:21 回复
  1. 2019-03-03 10:30:50 回复
  1. 2019-03-07 14:01:09 回复
  1. 谢谢谢谢 特别好

    2019-03-08 21:32:27 回复
  1. 不错

    2019-03-09 10:06:15 回复
  1. 2019-03-11 14:41:17 回复
  1. 顶顶顶顶顶

    2019-03-11 16:23:08 回复
  1. 2019-03-12 14:30:26 回复
  1. 6666啊

    2019-03-13 10:59:04 回复
  1. 2019-03-14 13:46:48 回复
  1. 哈哈

    2019-03-19 11:11:07 回复
  1. 看看

    2019-03-23 11:52:44 回复
  1. 赞赞赞

    2019-04-01 09:56:20 回复
  1. 看看

    2019-04-02 03:01:00 回复
  1. 2019-04-02 12:46:22 回复
  1. 别骗我

    2019-04-08 18:49:57 回复
  1. 2019-04-09 16:20:17 回复
  1. 2019-04-10 11:52:44 回复
  1. 【当前内容被和谐】

    2019-04-13 11:24:44 回复
  1. 2019-04-16 15:53:09 回复
  1. 先看看

    2019-04-17 09:31:36 回复
  1. 2019-04-17 13:49:18 回复
  1. 【当前内容被和谐】

    2019-05-05 16:00:16 回复
  1. 看一下~

    2019-05-07 17:31:32 回复
  1. 顶你

    2019-05-11 21:49:06 回复
  1. 优秀

    2019-05-13 10:02:21 回复
  1. 想看一下

    2019-05-19 17:19:59 回复
  1. 2019-05-21 13:49:58 回复
  1. js在哪下载呀

    2019-05-23 10:05:01 回复
  1. 2019-05-23 21:32:28 回复
  1. 看看

    2019-05-27 10:29:42 回复
  1. 2019-05-29 09:06:18 回复
  1. 2019-05-29 11:35:52 回复
  1. 可以

    2019-05-30 11:06:55 回复
  1. 2019-05-30 17:04:19 回复
  1. 学习学习

    2019-05-31 13:52:05 回复
  1. addressjs 在哪

    2019-05-31 15:09:59 回复
  1. 2019-06-05 10:01:42 回复
  1. 试试

    2019-06-05 17:10:51 回复
  1. 下来看看,谢谢

    2019-06-12 21:17:53 回复
  1. 必须赞一个

    2019-06-19 10:59:43 回复
  1. 大写的赞

    2019-06-19 15:35:29 回复
  1. 2019-06-19 15:57:13 回复
  1. 看看,赞一个

    2019-06-19 17:21:45 回复
  1. 谢谢分享

    2019-06-21 20:05:31 回复
  1. 2019-06-24 10:49:07 回复
  1. 好好好

    2019-06-24 13:33:16 回复
  1. 很赞很赞

    2019-06-27 16:45:50 回复
  1. 看看

    2019-07-05 17:05:53 回复
  1. 大大的赞

    2019-07-10 18:34:23 回复
  1. 感谢

    2019-07-11 14:00:02 回复
  1. 正需要

    2019-07-13 18:54:14 回复
  1. 可以

    2019-07-14 01:36:39 回复
  1. 内容在哪

    2019-07-16 11:03:29 回复
  1. 2019-07-18 14:47:57 回复
  1. 2019-07-19 14:11:55 回复
  1. 2019-07-23 17:33:27 回复
  1. 2019-07-24 16:13:42 回复
  1. 2019-07-29 17:06:12 回复
  1. 2019-08-01 11:08:21 回复
  1. 地址呢

    2019-08-02 18:06:58 回复
  1. js文件呢?

    2019-08-03 14:24:40 回复
  1. 厉害了

    2019-08-03 14:43:01 回复
  1. 呐呐呐呐呐呐呐呐

    2019-08-03 21:13:10 回复
  1. 2019-08-04 01:05:24 回复
  1. 2019-08-20 22:24:52 回复
  1. 谢谢分享

    2019-08-22 14:45:59 回复
  1. 2019-08-23 17:32:52 回复
  1. 还不错

    2019-08-26 11:08:27 回复
  1. 非常赞

    2019-08-27 14:42:53 回复
  1. 2019-08-27 14:48:46 回复
  1. Nice哦

    2019-08-30 17:48:55 回复
  1. 2019-09-04 15:53:57 回复
  1. 怎么下载

    2019-09-05 15:11:24 回复
  1. 赞一个

    2019-09-05 18:16:29 回复
  1. 看一下好不好用

    2019-09-06 09:26:35 回复
  1. 路过瞅瞅

    2019-09-06 12:24:46 回复
  1. 谢谢

    2019-09-07 11:05:59 回复
  1. 怎么看到address.js文件

    2019-09-07 22:22:29 回复
  1. 1赞

    2019-09-10 15:48:12 回复
  1. 感谢

    2019-09-11 09:46:35 回复
  1. 2019-09-14 14:10:42 回复
  1. 不错

    2019-09-17 13:29:04 回复
  1. 2019-09-23 09:48:56 回复
  1. 2019-09-24 16:49:46 回复
  1. 2019-09-27 16:20:41 回复
  1. 看看

    2019-10-07 17:54:48 回复
  1. 66666666厉害

    2019-10-10 17:04:32 回复