layui实现三级联动下拉菜单+thinkphp5读取表单提交数据

layui实现三级联动，在网上看到一个插件，挺好用的：

原文：https://blog.csdn.net/DSRCCSDN/article/details/84728396

插件预览地址：http://www.jpw.net/code/636431820895762098

 

使用了这个插件，基本可以达到自己想要的效果：

 

但是，当需要将数据存进数据库时发现问题。因为插件中input框中的值是城市对应的数字号码，虽然可以存进数据库，但读出来就不是很方便了（emmm其实应该是还不知道怎么实现！），那么就考虑下直接把城市名写进数据库吧！

修改了js文件，来来回回好几次，都没有改出来如何让input框里面的value直接改成城市名TAT

最后解决方案是：在select后加上一个隐藏的input框，设置一个id，把选择的值传进去；

具体代码：

1）在select框后加上input框：

 <input type="hidden" id="province" name="province">

2）表单提交前，把选中的值传到input框中，再提交到后台：

在form中加上<form οnsubmit="test()">

function test(){
            $('#province').val($('#provid').next().find('input').val());
            $('#city').val($('#cityid').next().find('input').val());
            $('#area').val($('#areaid').next().find('input').val());
        }

使用next()是因为，打开F12发现城市的值并不是直接写在select中，而是下一个节点中的input框中。