学习《layui从鱼到渔》———编写一个省市区三级联动下拉选择模块

分享已结精帖

 40  4932

AggerChen 2017-12-17

悬赏：20飞吻

以前一直用layui，有时候也会在社区回答回答问题，然后改改贤心的源码，实现自己更多的功能。但是呢，一直没有勇气说去写一个模块来用，一是本人只是个java后台开发，对前端了解不深，二是不知道如何下手。正好看到贤心出的教程《layui从鱼到渔》，说实话我很兴奋，比 layui 版本更新还要高兴，既能使用到layui的东西，还能跟贤心学习怎么编写，何乐而不为呢， [哈哈]

正好项目到这个地方需要省市区联动的下拉选择，我也看过社区很多朋友分享的代码，但是这次终于轮到我自己来实现了。真的是感慨万分，我是仿照table的写法写的，所以里面的有些思想虽然实现了，但是懂的还不够透彻，所以，期待贤心的下次《layui从鱼到渔》的更新了。。

再来说说本插件，仿照table编写，可以url访问后台，可以data配置本地数据。url访问数据后具有缓存功能，下次同样的地区不会再次访问url。具有重载插件方法和获取插件选择的值方法。能够设置初始值。看看效果吧

1.使用方式

html:
<div id="selectId" class="layui-form-item"></div>
//只需要设置一个id就行了

js:

layui.use('citySelect', function() {  //与引用其他原始模块一样，引入citySelect模块
  var $ = layui.jquery,
  citySelect = layui.citySelect;

  //初始化
  citySelect.render({
    id:'addRegion',
    elem: '#selectId',
    url:"<%=basePath%>/userInfo/queryRegionList.ft",
    //data:[ ],    //设置本地数据渲染
    method:'post',
     //lableName:'行政区域',    //自定义表单名称    默认：'行政区域'
     //search:false,        //是否开启输入查询 默认：true
     //required:true,        //是否必选       默认：false
     msg:'[药店]角色根据所选择连锁决定',  //模块下的提示信息 默认：null
     selectedArr:regionArr,    //默认选中数组        默认：[]
     where:{},
     response: {
      statusName: 'resultCode',
        statusCode: 0,
        msgName: 'msg',
      dataName: 'result'
     },
    filed:{
      area:true,    //是否启用区
        regionId:'regionId',
        regionName:'regionName',
        //provinceName: "province",    //默认省份名称
        //cityName : "city",      //默认城市名称
        //areaName : "area",      //默认区县名称
      },
      done:function(res){
              //成功回调函数
      },
      error:function(res,e,m){
              //失败回调函数
    }
  });
});

2.配置清单

3.方法

禁用启用：citySelect.disabled("addRegion",true);  //参数一位配置的id 参数二表示禁用还是启用

重载：citySelect.reload("addRegion",{   //参数一位插件配置的id,参数二可以为配置参数的所有字段
              selectedArr:[],
              disabled:true
           });	

获取所选值：citySelect.values("addRegion");  //参数为插件配置的id，返回值为数组，分别为省市区的选择值，未选择为空

4.注意：

当配置项配置了data本地数据后，url参数就失效了，而加载本地数据。本地数据格式已在下方，需要的可以去下载。
当选择了上级区域，url参数会去查询他的下级区域，所以后台查询省市区的url只能是一个，这个需要后台接口配合了
url查询了一个区域后，会自动保存到本地缓存，所以下次再选择同一个区域就不会去后台查询了。例如选择了北京，则url返回北京下级区域后保存到缓存，然后选择四川，再切回北京，则直接从缓存取出数据，而不会重新后台查询。
自己第一次写的插件，可能存在bug和不完美，希望大家多多提出意见和建议，让我们共同进步。
citySelect.js代码码云地址： https://gitee.com/Agger/codes/ednq2b367g4fu8rk5tosy20#0-sqq-1-34633-9737f6f9e09dfaf5d3fd14d775bfee85
本地全国行政区域json地址， https://gitee.com/Agger/codes/f0hz1nsxeav629ckiowu323

回帖

金满斗

2017-12-18

没搞懂，如果要用本地数据的话，本地数据放在哪里呢？

1 回复
神羽鸦青

2017-12-29

是直接写数组吧？看说明里应该是写数组

1 回复
AggerChen

2017-12-29

@神羽鸦青数组。你恐怕要自己单独引用一下

1 回复
宽哥

2017-12-17

哎呀，以假乱真了

0 回复
冬日温暖 VIP3

2017-12-17

先点个赞

0 回复
indifferent VIP3

2017-12-18

这么流弊啊，要上天的节奏啊！

0 回复
猫吃

2017-12-18

0 回复
爱死寂寞人 VIP3

2017-12-18

0 回复
绝命老白

2017-12-18

厉害

0 回复
虽远必诛 VIP3

2017-12-18

先收藏了再说

0 回复
飘飘雨下 VIP4

2017-12-18

只要是分享的，我都点赞

0 回复
美好小溪 VIP4

2017-12-18

多谢大神分享

0 回复
亚马逊

2017-12-18

分享下我的之前搞的，无限级
http://fly.layui.com/jie/14421/

0 回复
谢贤

2017-12-18

@宽哥哈哈

0 回复
demon998

2017-12-18

@亚马感谢了

0 回复
亚马逊

2017-12-18

@demon998 是在说我么。

0 回复
AggerChen

2017-12-19

@金满斗本地数据就是一个js数组变量就行了，然后配置在配置参数 data：[ ]就行了。
本地数据你可以下载我提供的地址 https://gitee.com/Agger/codes/f0hz1nsxeav629ckiowu323

0 回复
aimon

2017-12-19

本地数据用不了

0 回复
aimon

2017-12-19

而且样式也没有渲染成layui的样式

0 回复
aimon

2017-12-19

可以用了，原来是路径错了，感谢LZ

0 回复
aimon

2017-12-19

LZ这个默认选中数组是个什么样的格式啊，设置都无效，感觉用起来好困难啊

0 回复
雨加雪

2017-12-19

1232412424

0 回复
金满斗

2017-12-19

@AggerChen ，首先谢谢你的分享，我觉得这个很好。我准备把它搞成个例子放我博客上。以后需要的时候直接用。
昨天试验了下，没成功，没有监听事件。这里是我的代码截图。

里面的treeSelect.js是别人的无极限分类。和这个无关。
现在的情况是用本地文件省能加载，但不能监听下拉选择事件。后面的当然没反应了。你觉得我这样错在哪里。
或者你贴下你自己的项目应用网址，我去看看也行

0 回复
金满斗

2017-12-19

@金满斗，解决了，原来我没加表单。html里加这个就行了。谢谢分享。
<form class="layui-form">
<div id="selectId" class="layui-form-item"></div>
</form>
要加form的

0 回复
金满斗

2017-12-19

已经分享到我的博客了，有兴趣的朋友可以去看看。
http://blog.jvbaopeng.com/blog/149.html

0 回复
飞趣社区创始人

2017-12-19

好屌~~~~~

0 回复
AggerChen

2017-12-20

@aimon 默认选中数组就是字符串啊比如 ["510000","510100" ,"510101"]
省市区的regionId都放在一个数组里面，没有先后顺序。我的逻辑是这样的，渲染省的时候去判断有没有默认值，渲染市和区的时候也是一样的逻辑。但是省份的默认regionId只能有一个，多个的话渲染的时候以最后一个省份为准

0 回复
AggerChen

2017-12-20

@金满斗对因为这个是表单元素，同样用的是表单监听事件，所以要加载表单里面才能实现。

0 回复
demon998

2017-12-20

@亚马逊肯定是啊。我在测试下回复，我删除回复名字部分是不是回复的已经不是原来的那个人了。

0 回复
缺一个拥抱

2017-12-21

大佬，请问怎么获取选中的值呢？

0 回复

12 下一页

本帖已设置禁止回复