layui select 两级联动

最新推荐文章于 2025-09-24 11:43:51 发布

原创最新推荐文章于 2025-09-24 11:43:51 发布 · 9.8k 阅读

CC 4.0 BY-SA版权

博客介绍了使用form.on监听事件实现两个select框联动的方法。给出了select框的HTML代码，通过简单的ajax请求获取数据填充下拉框，添加layui监听事件，根据一个select框的选择，通过ajax带参数请求后台条件查询方法，更新另一个select框的选项，并进行渲染。

我用的是form.on监听事件，不多说了，直接代码

这是两个select框，根据下面这个的选择上面那个自动选择

//简单的ajax

$.ajax({
                           url: WEB_CONTEXT+'rest/proWorkRestFul/getList',
                           type: "post",
                           dataType : "json",
                           contentType : "application/json",
                           async: false,
                           success: function (result) {
                                   workData = result.data;
                                   for(var x in workData){
                                   strs += '<option value = "' + workData[x].no + '">' + workData[x].no + '</option>'
                                       }
                                       $("#no").html(strs);
                       }
                           });

//添加layui的监听事件

form.on('select(no)', function(data){ //no是那个lay-filter的值
                           var nos=$("#no").val();//获得选中的option的值
                           console.log(nos);//没啥用
                               $.ajax({
                                   url: WEB_CONTEXT+'rest/proWorkRestFul/getListByCondition?no='+nos,//带参数将这个传到后台条件查询方法里面
                                   type: "post",
                                   dataType : "json",
                                   contentType : "application/json",
                                   async: false,//同步
                                   success: function (result) {
                                           var data = result.data;
                                           console.log(data);
                                           for(var x in data){
                                           str += '<option value = "' + data[x].id + '">' + data[x].content + '</option>'
                                               }
                                               $("#contents").html(str);
                               }
                                   });
                                   form.render('select');//最后记得渲染
                       });