layui连接mysql数据库_layui+PHP+mysql 制作自己的二级联动菜单代码

最近在学习layui,不得不说这个layui真的很不错。开发带来了很多方面之处。

我们在开发中会常常用到联动菜单。但是layui的联动菜单，需要监听一级菜单的操作。要不是的话，还真不好搞。我也是看了好久好久的资料才学会的。为了方便以后使用，特整理资料如下。

下面是我自己的网页游戏平台的充值界面。点击一级菜单，选择不同的游戏的时候，通过jquery的AJAX，把对应的值传递给服务器处理后，并右边二级菜单要返回显示对应游戏的服务器列表。

示例代码：

选择游戏：

//表示要鉴听这个下载菜单就要加：lay-filter 过滤器。

请选择要充值的游戏

剑雨江湖

九阴真经

帝王霸业

百战天下

天龙八部

//因为获取到的数据还需要刷新一下，所以，指定刷新这个二级菜单的

请选择服务器

下面是Jquery的代码用来监听指定的select，并把值传递给指定的网页来处理。

//监听二级联动菜单的操作

layui.form.on('select(一级下拉菜单的ID)', function(data){

//把下拉菜单选中的值赋值给value;

value = data.value;

//通过JQUERY的ajax方式用POST值提交到导步处理

$.post('用来接收和处理POST数据的地址',{参数名:value},function(data){

//把异步处理得到的数据data插入到相应的二级下拉菜单里面。自己构造格式比如：菜单名称

$('#sid').html(data); //sid 是二级菜单的ID

//再重新渲染一次这个下拉菜单，servervox为二级菜单的父层容器，加上lay-filter="serverbox"的容器，同时要加 class=layui-form

layui.form.render('select','serverbox');//表示更新器为serverbox内的select对像。

})

})

如下图，就是我自己做的一个二级联动，左边一级菜单选择了相应的内容，然后右边会自动异步从数据库得到数据并渲染出来。