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

575 30823

SuperMan ❀ 2017-07-06 15:28:13

付费话题：0 积分

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

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

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

基于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文件就可以生效了。

当前内容需回复后查看

LIUHAI

赞

2018-07-06 13:40:57 回复

Youth

gogogo攒

2018-07-06 16:59:08 回复

Youth

【当前内容被和谐】

2018-07-06 16:59:22 回复
1. SuperMan ❀
  
  你很优秀！
  
  2018-07-06 17:03:22 回复
1. @A
  
  历害害阿海
  
  2019-06-18 10:08:09 回复

LIUHAI

后台呢？有吗

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 回复

幸运虎

赞

2018-07-09 17:39:34 回复

五道杠的小男人

看看

2018-07-10 11:04:18 回复

等待

赞赞赞

2018-07-12 10:18:40 回复

qianxun233

666666666666666666强

2018-07-18 16:51:29 回复

souga

赞

2018-07-18 17:41:57 回复

airplane

赞

2018-07-20 14:15:57 回复

Shakira

看看

2018-07-20 15:30:19 回复

艾克拉斯

瞅瞅啥样

2018-07-23 13:58:13 回复

老于头

不错

2018-07-25 00:24:41 回复

苏格拉没有底

赞

2018-08-07 15:15:02 回复

欧一技术-李浩源

address.js谁有

2018-08-14 17:46:11 回复

away0722

赞

2018-08-16 16:54:53 回复

想一个名字好难

六六六六六六六六六六六六六六六六六六六六

2018-08-22 09:59:31 回复

hao_qqian

赞

2018-08-22 11:16:58 回复

待鸣

66666溜

2018-08-27 17:14:51 回复

duyu

赞

2018-08-30 08:50:38 回复

哈哈天子

赞

2018-09-02 17:38:48 回复

雨落晴空

赞

2018-09-04 10:05:15 回复

lancelot

数据怎么下载呢？

2018-09-04 23:30:14 回复

lancelot

运行不了，检查js代码才发现错误一堆，要改很多地方，真是坑得一比。。

2018-09-05 01:06:19 回复
1. SuperMan ❀
  
  这么多人都在用的很OK，到你这里成了错误一堆，坑了一笔。好吧，一笔！
  
  2018-09-05 11:27:04 回复