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

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

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

示例代码：

<div class="layui-form-item">

            <div class="layui-form-label">选择游戏：</div>

            <div class="layui-input-block">

                <div class="layui-input-inline">

                    <select name="gid" id="gid" lay-filter="gid">//表示要鉴听这个下载菜单就要加：lay-filter 过滤器。

                        <option value="">请选择要充值的游戏</option>                            

                                <option value="1">剑雨江湖</option>

                                 <option value="2">九阴真经</option>

                                 <option value="3">帝王霸业</option>

                                 <option value="4">百战天下</option>

                                 <option value="5">天龙八部</option>                            

                        </select>

                    </div>

                    <div class="layui-input-inline layui-form" lay-filter="serverbox"> //因为获取到的数据还需要刷新一下，所以，指定刷新这个二级菜单的

                    <select name="sid" id="sid" lay-filter="sid">

                        <option value="">请选择服务器</option>

                        </select>                    

                    </div>

                </div>

            </div>

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

<script src="/layui/layui.all.js"></script>
<script>
//监听二级联动菜单的操作
layui.form.on('select(一级下拉菜单的ID)', function(data){
	//把下拉菜单选中的值赋值给value;
	value = data.value;
	//通过JQUERY的ajax方式用POST值提交到导步处理
	$.post('用来接收和处理POST数据的地址',{参数名:value},function(data){
		//把异步处理得到的数据data插入到相应的二级下拉菜单里面。自己构造格式比如：<option value="值">菜单名称</option>
		$('#sid').html(data); //sid 是二级菜单的ID
		//再重新渲染一次这个下拉菜单，servervox为二级菜单的父层容器，加上lay-filter="serverbox"的容器，同时要加 class=layui-form
		layui.form.render('select','serverbox');	//表示更新器为serverbox内的select对像。
	})
})
</script>

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