HTML Layui Distpicker 住址/收货地址选择联动选择框

前言

他来了,他来了,他带着BUG又来了…
这次趟Layui的坑,客户巴巴要收集用户的收货地址.这需要我们有一个全国的省市区县的数据,挨个手动输入是不可能的,这辈子都不可能.

然而

我们并不满足默认简陋的select界面样式,于是我们打开了layui的官方文档…

看了半天发现…
…
…
没有发现!

文档中并没有找到我们想要的动态地址选择代码,只是简单的弄了几个option上去而已.
完整的地址数据需要我们自己接入,还好我们有distpicker神器在手

Distpicker库

这里着重讲一下distpicker这个插件,轻量级的js库,本文使用的是V2.0.6版本.

这个插件可以超级简单的实现三联select选择,并且支持选择省份切换子select操作
全程仅需引用一个js文件即可,干净利索漂亮且美好.
吐槽:为什么文档要写成英文的…

下面放个简单的示例代码:

<!--引用distpicker和jq-->
<script type="text/javascript" src="jqrey.min.js"></script>
<script type="text/javascript" src="distpicker.js"></script><!--html示例-->
<div data-toggle="distpicker" data-autoselect="3"><select></select><select></select><select></select>
</div><!--控制代码-->
<script>$("#distpicker").distpicker();
</script>

演示效果:

是的,你没有看错.就这么简单几行其他工作都帮你完成了!
当然这个插件还有更多的用法,小伙伴门可以去GitHub下载源码回来,里面的doc文件夹有作者为我们准备的各种调教说明.

通过代码调试我们发现,Distpicke帮我们插入了一堆option到select下,并且这些option会随着用户选择自动切换:

挣扎与彷徨,在真理中看到了光

看过Layui的文档示例和代码调试后才发现,Layui的三联选择器是通过渲染方式运行的.

也就是说它将原本的select标签隐藏,随后根据select数据重新生成了input显示.
这种渲染方式,在这个情况下需要我们手动的控制它该何时渲染.

好了,现在我们明白了:

Distpicke能够自动的生成option和自动切换select三联选择菜单
Layui的显示是基于select的数据重新生成input通过渲染方式进行的

于是,我们拥有了一个逻辑:
1.当Layui渲染初始化时候,初始化Distpicke,随后让Layui更新渲染
2.当Layui地址组件被选择切换的时候,通知Distpicke切换二三联菜单,随后渲染

准备

1.Layui一份
2.jqrey一份
3.distpicker一份(国内地址三联选择器)

上干货

复制下面代码到桌面,命名为LayuiDistpickerDemo.html

<!-- 引用资源-->
<script type="text/javascript" src="jqrey.min.js"></script>
<script type="text/javascript" src="distpicker.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script><!--地址选择-->
<form class="layui-form" action="" ><div id="distpicker2" class="layui-form-item" data-toggle="distpicker" data-autoselect="3"><label class="layui-form-label" style="float: left;">收货地址</label><div class="submit_address"><div class="layui-input-block"><select id="address_sheng" name="quiz1" lay-filter="brickType1"></select></div><div class="layui-input-block"><select id="address_shi" name="quiz2" lay-filter="brickType2"></select></div><div class="layui-input-block"><select id="address_qv" name="quiz3" lay-filter="brickType3"></select></div></div></div><!-- 控制代码--><script type="text/javascript">//layui表单组件渲染才显示 https://www.layui.com/doc/base/faq.html#formlayui.use('form', function () {//获取表单元素var form = layui.form;//表单初始化 随后让Layui渲染一次$("#distpicker2").distpicker();form.render();//声明表单select选择事件form.on('select(brickType1)', function (data) {updata_address_select(data, '#address_sheng');form.render();//重新渲染一次});form.on('select(brickType2)', function (data) {updata_address_select(data, '#address_shi');form.render();//重新渲染一次});form.on('select(brickType3)', function (data) {updata_address_select(data, '#address_qv');form.render();//重新渲染一次});});function updata_address_select(data, id) {//这个方法将select的value设置为当前选择,//并且激活了distpicker的选择事件来更新子地址列表var val = data.value;var sel = $(id);sel.val(data.value);sel.change();//alert("select! id:" + val.id + " val:" + data.value);}</script>
</form>

运行后我们得到了一个这样的界面

尝试对地址进行点击切换,我们发现上述我们所需的功能都已经实现了.伙伴们多看看上面代码的实现方式.照搬也无妨

结尾

这个轮子我总共装了2个多小时才装上,也让我对Layui有了更深的理解.
这里十分感谢Layui与Distpicker,助力我们茁壮膨胀.
拜了个拜.