投稿
  1. 极客之音首页
  2. 后端笔记

你搜不到的“三级双向联动+自动选中”

飞熊 • • 后端笔记 • 阅读 78

人生之路坎坎坷坷，跌跌撞撞在所难免。但是，不论跌了多少次，你都必须坚强勇敢地站起来。任何时候，无论你面临着生命的何等困惑抑或经受着多少挫折，无论道路多艰难，希望变得如何渺茫，请你不要绝望，再试一次，坚持到底，成功终将属于勇不言败的你。

导读：本篇文章讲解 你搜不到的“三级双向联动+自动选中”，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

三级双向联动+自动选中

需求分析

  1. 三级双向联动
    我想要实现房间类型和房间入住人数随着房间的改变而改变，当然由于房间类型的改变，房间的范围也根据房间类型的改变而改变。我叫它三级双向联动。
  2. 自动选中
    当点击一个房间时，自动跳转到办理入住页面，并自动选中该房间信息（房间类型、房间编号、房间可入住人数）
  3. 三级双向联动+自动选中
    顾名思义，就是将上面两个方面结合起来。

具体请看文章开头的视频【需求分析看着费劲】

第一种方法：Vue

其实我第一次实现的是第二种方法，但是觉得正规的项目应该使用Vue实现，故又用vue实现了一遍。

<!-- HTML部分代码 -->
<div class="layui-form-item">
    <label class="layui-form-label">请选择房间类型</label>
    <div class="layui-input-block">
        <select lay-filter="typeId" id="categoryId">
            <option value="0">所有类型</option>
            <option th:each="obj,Obj:${list}" th:value="${obj.categoryId}"
                    th:text="${obj.categoryName}" th:selected="${ obj.categoryId == roomTypeId}"></option>
        </select>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">请选择房间</label>
    <div class="layui-input-block">
        <select id="roomId" lay-filter="roomId" name="roomId"  lay-search="" lay-verify="required" v-model="selected">
            <option value="">请选择房间</option>
            <option v-for="obj in roomList" :value="obj.id" :key="obj.id">{{obj.name}}</option>
            <option id="xuan" th:value="${roomId}" hidden></option>
            <!--<option th:each="obj,Obj:${roomList}" th:value="${obj.id}"-->
            <!--        th:text="${obj.name}" th:selected="${ obj.id == roomId}"></option>-->
        </select>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">可入住</label>
    <div class="layui-input-block">
        <input type="text" readonly class="layui-input" id="size" placeholder="可入住人数">
    </div>
</div>

js部分，本来打算粘贴到一块，不过可能太长，就分开了

// js部分
<script type="text/javascript" src="\vue@2.6.0"></script>
<script>
    var app = new Vue({
        el: '#roomId',
        data: {
            roomList: [],
            selected: $('#xuan').val()
        },
        updated() {
            layui.use('form', function () {
                    var form = layui.form;
                    form.render();
                }
            )
        },
    })
    
    layui.use(['form', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , $ = layui.$;
        //选中房间类型事件
        // 联动框
        form.on('select(typeId)', function (data) {
            app.roomList = null;
            app.selected = null;
            $("#roomMoney").val("");
            $("#size").val("");
            $.post("/reception/order/getRoomList", {categoryId: data.value}, function (res) {
                app.roomList = res;
            });
        });
        // ============一进入该页面，自动触发一次房间是否被选中,自动根据房间选择人数/类型============
        // 一进来，房间为 *所有类型* 时，可选房间
        // if ($("#categoryId").val() == 0){
            $.post("/reception/order/getRoomList", {categoryId: $("#categoryId").val()}, function (res) {
                console.log("res:::::")
                console.log(res)
                app.roomList = res;
            });
        // }

        if ($("#roomId").val() != ""){
            //根据房间ID查询可住人数
            $.post("/reception/order/getSize", {id: $("#roomId").val()}, function (data) {
                $("#size").val(data);
            });
            //根据房间ID查询房间类型
            $.post("/reception/order/getRoomCategoryInfo", {id: $("#roomId").val()}, function (data1) {
                $('#categoryId').find('option[value="data1.categoryId"]').prop('selected',true);//选中value="2"的option
                // 根据当前类型，显示满足条件的房间
                $.post("/reception/order/getRoomList", {categoryId: data1.categoryId}, function (data) {
                    app.roomList = data;
                    // form.render("select");
                });
            });
        }else{
            $("#size").val(null);
            // $("#categoryId").val("0");
        }
        //选中房间事件
        form.on('select(roomId)', function (data) {
            // 将其值设置为roomId【为空时，可入住人数也空】
            $("#size").val(data.value);
            if (data.value == "") {
                return false;
            }
            //根据房间ID查询可住人数
            $.post("/reception/order/getSize", {id: data.value}, function (data) {
                $("#size").val(data);
            });
            // ====================== 选中该房间的类型就变，并根据类型缩小房间的选择范围 =====================
            $.post("/reception/order/getRoomCategoryInfo",{id: data.value}, function (data3) {
                var typeId = data3.categoryId;
                // 下面一行不可用,但是上面用这行就行，离了个大谱【 ???????????????????】
                // $('#categoryId').find('option[value="typeId"]').prop('selected',true);//选中value="2"的option
                var obj = document.getElementById("categoryId");
                for(var i=0;i<obj.length;i++){
                    if(obj[i].value==typeId){
                        obj[i].selected = true;
                        break;
                    }
                }
                // 根据当前类型，出现满足条件的房间
                $.post("/reception/order/getRoomList", {categoryId: typeId}, function (data2) {
                    app.roomList = data2;
                    // 并选中当前房间
                    app.selected = data.value;
                });
            });
        });
    })
</script>

由于控制器部分是共用的，故就粘贴到最后了

第二种方法：JS

<!-- HTML部分代码 -->
<div class="layui-form-item">
    <label class="layui-form-label">请选择房间类型</label>
    <div class="layui-input-block">
        <select lay-filter="typeId" id="categoryId">
            <option value="0">所有类型</option>
            <option th:each="obj,Obj:${list}" th:value="${obj.categoryId}"
                    th:text="${obj.categoryName}" th:selected="${ obj.categoryId == roomTypeId}"></option>
        </select>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">请选择房间</label>
    <div class="layui-input-block">
        <select id="roomId" lay-filter="roomId" name="roomId"  lay-search="" lay-verify="required">
            <option value="">请选择房间</option>
            <option th:each="obj,Obj:${roomList}" th:value="${obj.id}"
                    th:text="${obj.name}" th:selected="${ obj.id == roomId}"></option>
        </select>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">可入住</label>
    <div class="layui-input-block">
        <input type="text" readonly class="layui-input" id="size" placeholder="可入住人数">
    </div>
</div>

js部分，理由同上

// js部分
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , $ = layui.$;
        //选中房间类型事件
        form.on('select(typeId)', function (data) {
            $("#roomMoney").val("");
            $("#size").val("");
            $.post("/reception/order/getRoomList", {categoryId: data.value}, function (data) {
                var content = "<option value=''>请选择房间</option>";
                for (var i = 0; i < data.length; i++) {
                    content += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"
                }
                $("#roomId").html(content);
                form.render("select");
            });
            return false;
        });
        // ============一进入该页面，自动触发一次房间是否被选中,自动根据房间选择人数/类型============
        if ($("#roomId").val() != ""){
            //根据房间ID查询可住人数
            $.post("/reception/order/getSize", {id: $("#roomId").val()}, function (data) {
                $("#size").val(data);
            });
            //根据房间ID查询房间类型
            $.post("/reception/order/getRoomCategoryInfo", {id: $("#roomId").val()}, function (data1) {
                $('#categoryId').find('option[value="data1.categoryId"]').prop('selected',true);//选中value="2"的option
                // 根据当前类型，出现满足条件的房间
                $.post("/reception/order/getRoomList", {categoryId: data1.categoryId}, function (data) {
                    var content = "<option value=''>请选择房间</option>";
                    for (var i = 0; i < data.length; i++) {
                        content += "<option selected=\"$(\"#roomId\").val() == data[i].id\" value='" + data[i].id + "'>" + data[i].name + "</option>"
                    }
                    $("#roomId").html(content);
                    form.render("select");
                });
            });
        }else{
            $("#size").val(null);
            $("#categoryId").val("0");
        }
        //选中房间事件
        form.on('select(roomId)', function (data) {
            // 将其值设置为roomId【为空时，可入住人数也空】
            $("#size").val(data.value);
            if (data.value == "") {
                return false;
            }
            //根据房间ID查询可住人数
            $.post("/reception/order/getSize", {id: data.value}, function (data) {
                $("#size").val(data);
            });
            // ====================== 选中该房间的类型，并根据类型缩小房间的选择范围 =====================
            $.post("/reception/order/getRoomCategoryInfo",{id: data.value}, function (data3) {
                var typeId = data3.categoryId;
                // 下面一行不可用,但是上面用这行就行，离了个大谱【 ???????????????????】
                // $('#categoryId').find('option[value="typeId"]').prop('selected',true);//选中value="2"的option
                var obj = document.getElementById("categoryId");
                for(var i=0;i<obj.length;i++){
                    if(obj[i].value==typeId){
                        obj[i].selected = true;
                        break;
                    }
                }
                // 根据当前类型，出现满足条件的房间
                $.post("/reception/order/getRoomList", {categoryId: typeId}, function (data2) {
                    var content1 = "<option value=''>请选择房间</option>";
                    for (var i = 0; i < data2.length; i++) {
                        content1 += "<option selected=\"$(\"#roomId\").val() == data2[i].id\" value='" + data2[i].id + "'>" + data2[i].name + "</option>"
                    }
                    $("#roomId").html(content1);
                    form.render("select");
                });
            });
            return false;
        });
    })
</script>

控制器

// 控制器部分
/**
 *根据房间类型查询所有可办理入住房间
 */
@PostMapping("/getRoomList")
@ResponseBody
public List<Room> getRoomList(int categoryId) {
    QueryWrapper<Room> queryWrapper = new QueryWrapper<>();
    if (categoryId != 0) {
        queryWrapper.eq("category_id", categoryId);
    }
    queryWrapper.eq("room_status", 1);
    return roomService.list(queryWrapper);
}

/**
 * 根据房间ID查询 房间类型
 */
@PostMapping("/getRoomCategoryInfo")
@ResponseBody
public Category getRoomCategoryInfo(int id) {
    Room room = roomService.getById(id);
    if (room != null) {
        Category category = categoryService.getById(room.getCategoryId());
        // return category == null ? "0" : category.getCategoryName();
        return category;
    }
    return null;
}

/**
 * 根据房间ID查询可入住人数
 */
@PostMapping("/getSize")
@ResponseBody
public int getCategoryInfo(int id) {
    Room room = roomService.getById(id);
    if (room != null) {
        Category category = categoryService.getById(room.getCategoryId());
        return category == null ? 0 : category.getPerson();
    }
    return 0;
}

里面的技术虽然很常见，但是我感觉有巧妙的地方
好几个月没写了，本以为忘完了，没想到是去沉淀了。
我要将它写进我的论文！！！

本文为原创作品，转载请注明出处

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/133723.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！