layui select动态赋值的两种方式(兼容ie8)及报错处理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44135807/article/details/105275867

本文介绍如何使用layui框架渲染表单及select下拉菜单，包括与jQuery的结合使用，以及解决兼容性问题，如IE8的支持。通过具体代码示例，展示了如何动态填充select选项，并在修改和新增场景下预填充表单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一：

<form class="layui-form" action="" lay-filter="updateModelForm">
        
            <div class="layui-form-item">
                <label class="layui-form-label">数据类型</label>
                <div class="layui-input-block">
                    <select name="typeId" id="typeId" lay-filter="required">
                    <!-- 如果兼容ie8，必须有一个默认的option -->
                        <option value="-1"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="updateSave">确定</button>
                    <button type="button" class="layui-btn" lay-submit="" id="updateModelClose">取消</button>
                </div>
            </div>
        </form>

js代码

<script type="text/javascript" th:inline="JavaScript">
    var form
    layui.use(['form', 'layedit', 'laydate'], function(){
        form = layui.form
        var layer = layui.layer
       
        form.render()
        function isUpdate() {
            var isUpdate = window.location.href.indexOf('?id=')//>-1是修改，否则是新增
            if(isUpdate > -1){
                var newInfo = JSON.parse(sessionStorage.getItem("evaluateProjectManageInfo"))
                console.log(newInfo)
                form.val('updateModelForm', {
                    'name':newInfo.name,
                    'purpose':newInfo.purpose,
                    'createTime':newInfo.createTime.slice(0,10),
                    'actualFinishTime':newInfo.WCSJ,
                    'creatorId':newInfo.creatorId,
                    'username':newInfo.USERNAME,
                });
            }

        }
        isUpdate()
        function getOptionSJLX(element,name,id){
            var data = {
                page:1,
                limit:999999
            }
            $.ajax({
                type: "get",
                url: "/user/userList",
                dataType: 'json',
                data:data,
                success:function(msg){
                    console.log(msg)
                    if(msg.code == 0) {
                        var len = msg.data.list.length
                        for (var i = 0; i <len ; i++) {
                            //方式一：兼容性好，兼容ie8
                            var option = document.createElement("option");
                            option.setAttribute("value", msg.data.list[i][id]);
                            option.innerText = msg.data.list[i][name];
                            console.log(option)
                            document.getElementById(element).appendChild(option)
                            //方式二：代码简单，但是不兼容ie8  谷歌没问题
                            //$(element).append(new Option(msg.data.list[i][name], msg.data.list[i][id]));// 下拉菜单里添加元素
                        }
                        isUpdate()
                        layui.form.render();
                    }
                },
            })

        }
        getOptionSJLX('typeId','name','id')
    });
</script>