layui表单回显三级联动下拉框问题

最新推荐文章于 2024-01-17 09:51:34 发布

啦哈哈啦

最新推荐文章于 2024-01-17 09:51:34 发布

阅读量781

点赞数

文章标签： layui javascript java jquery

本文链接：https://blog.csdn.net/Llaqwer/article/details/131302040

版权

该文章提供了一个使用jQuery和Ajax处理三级联动下拉框（省市区）的简单解决方案。通过获取服务器数据，对表单进行赋值，并循环遍历数组来动态生成和填充下拉选项，同时根据已有的ID值回显选中的选项，确保数据的正确显示。

摘要由CSDN通过智能技术生成

看了其他博文，给出的解决方案都非常复杂且不好理解。我这里就是一个省市区三级联动下拉框的场景，下面是我的解决方案，直接上代码，详见注释

$.ajax({
     type: "GET",
     url: "${ctx}/unitInfo/selectUnitById",
     data: {id: "${id}"},
     success: function (res) {
         if (res.code == 200) {
             var unitInfo = res.data;
             //表单正常赋值
             form.val("myForm", {
             	 //省下拉框
                 "oneId": unitInfo.oneId,
                 //市下拉框
                 "twoId": unitInfo.twoId,
                 //区下拉框
                 "threeId": unitInfo.threeId,
                 "unitName": unitInfo.unitName,
                 "unitType": unitInfo.unitType,
                 "adminId": unitInfo.adminId
             });
             //渲染市下拉框所有选项，twoArray是包含所有市信息的数组
            $.each(twoArray, function(index, item) {
            	 //循环判断，得到省级下面对应的所有市，追加到页面
                 if(item.oneId == unitInfo.oneId){
                     $("#twoId").append("<option value='"+item.twoId+"'>"+item.twoFullName+"</option>");
                 }
                 //此行是重点，判断twoArray的市id=unitInfo的id，对该下拉框重新赋下值，就能达到回显选中的效果
                 if(item.twoId == unitInfo.twoId){
                     $("#twoId").val(item.twoId);
                 }
             });
             //渲染区下拉框，threeArray是包含所有区信息的数组，处理逻辑同上
             $.each(threeArray, function(index, item) {
                 if(item.twoId == unitInfo.twoId){
                     $("#threeId").append("<option value='"+item.threeId+"'>"+item.threeName+"</option>");
                 }
                 if(item.threeId == unitInfo.threeId){
                     $("#threeId").val(item.threeId);
                 }
             });
             form.render('select');
         }
     }
 });