LayUI select下拉框联动

LayUI 下拉框联动，选择一个其他根据对应关系自动选择。

HTML代码如下：

<div class='layui-fluid'>
    <div class='layui-card'>
        <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="lay_from">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">监管方式</label>
                    <div class="layui-input-inline">
                        <select name="tradeMode">
                            <option value="9710">跨境电商B2B直接出口</option>
                            <option value="9810">跨境电商出口海外仓</option>
                        </select>
                    </div>
                    <label class="layui-form-label">出境关别</label>
                    <div class="layui-input-inline">
                        <select name="iEPort" lay-filter="iEPort">
                            <option value="4204">4204-威海海关</option>
                            <option value="4209">4209-荣成海关</option>
                            <option value="4236">4236-荣龙眼办</option>
                            <option value="4201">4201-烟台海关</option>
                            <option value="4202">4202-日照海关</option>
                            <option value="4218">4218-青开发区</option>
                            <option value="4258">4258-青前湾港</option>
                            <option value="4227">4227-青岛大港</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">离境口岸</label>
                    <div class="layui-input-inline">
                        <select name="ePort" id="ePort">
                            <option value="371202">371202-威海港</option>
                            <option value="370401">370401-石岛</option>
                            <option value="370402">370402-龙眼</option>
                            <option value="370302">370302-烟台港</option>
                            <option value="370002">370002-日照</option>
                            <option value="370201">370201-黄岛</option>
                            <option value="370101">370101-青岛港</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

JS代码

<script type="text/javascript">
    layui.use(function () {
        var upload = layui.upload, form = layui.form;

        form.on('select(iEPort)',function (data) {
            //监听到了下拉框选择的选项，传递过来
            var port = data.value;
            // console.log(data);//在控制台输出信息
            //匹配规则（对应关系）
            if (port == 4204){
                //表单初始赋值
                form.val('lay_from', { //注意lay_from
                          "ePort": 371202 
                         })
            } else if(port == 4209){
                form.val('lay_from', { "ePort": 370401 })
            } else if(port == 4236){
                form.val('lay_from', { "ePort": 370402 })
            } else if(port == 4201){
                form.val('lay_from', { "ePort": 370302 })
            } else if(port == 4202){
                form.val('lay_from', { "ePort": 370002 })
            } else if(port == 4227){
                form.val('lay_from', { "ePort": 370101 })
            } else {
                form.val('lay_from', { "ePort": 370201 })
            }
            //重新加载layui的表单
            form.render();
        });

    });
</script>

应该足够简洁明了了，有老铁看不懂的话，留言即可。