layui的select触发change使用，以及根据两个select的值控制其他选项的显示

因项目需要，做一个酒店预订功能，根据入住日期和离店日期，判断显示的房型，当然是根据二者后台返回。
这里换成了其他内容，不过原理一样。
实现的功能为：
当firNum < secNum 时，图片显示，同时昵称也显示，显示的当前页（firNum的val值作为页码）的昵称

html

<!-- =======
        img
    ======== -->
    <img src="../bg.png" alt="" style="display: none;">

    <!-- ============
        layui-form
    ============ -->
    <form class="layui-form layui-container batchinput-form">
        <div class="layui-form-item">
            <label class="layui-form-label">firNum</label>
            <div class="layui-input-block">
                <select name="date1" lay-filter="date" class="selected" id="date1">
                    <option value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">secNum</label>
            <div class="layui-input-block">
                <select name="date2" lay-filter="date" class="selected" id="date2">
                    <option value=""></option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <select name="date3" lay-filter="houseType" class="selected" id="date3">

                </select>
            </div>
        </div>
    </form>

js

layui的select触发，注意要使用官方文档

1. form.on(‘select(test)’, function(data){…});/---- 此处的test就是你自己的lay-filter的值 —/
2. form.render(‘select’);

<!-- ========
        js
    ======== -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="../layui/layui.js"></script>

    <script>
        $(function () {
            $showName = $("#date3")
            $showName.text("")
            layui.use('form', function () {
                var form = layui.form;
                
                /*-----  下拉框选中事件 -----*/
                form.on('select(date)', function (data) {
                
                    /*-----  判断是否为空 -----*/
                    var sel = $(this).children('option:selected').val();
                    if (sel !== "") {
                        console.log("有选中")
                    } else {
                        console.log("无")
                    }

                    /*-----  比较两个数字 -----*/
                    var fir = parseFloat($("#date1").children('option:selected').val());
                    var sec = parseFloat($("#date2").children('option:selected').val());
                    if (fir < sec) {
                        $("img").show()

                        /*-----  ajax -----*/
                        $.ajax({
                            url: 'https://www.apiopen.top/femaleNameApi?',
                            type: 'POST',
                            data: {
                                page: fir
                            },
                            dataType: 'JSON',
                            async: true,
                            success: function (res) {
                                var data = res.data
                                for (let i = 0; i < data.length; i++) {
                                
                                    // 获取昵称
                                    $name = data[i]['femalename']
                                    console.log($name)
                                    
                                    // 放在option并添加到select
                                    $showName.append('<option>' + $name +
                                    '</option>')
                                    form.render('select')
                                }
                            }
                        });
                    } else {
                        $("img").hide()
                        $("#date3").text("")
                        form.render('select')
                    }
                })
            });
        });
    </script>