layui form里的select元素动态赋值无效

问题描述

form中的select标签html代码

                                        <div class="layui-inline">
                                            <label class="layui-form-label">采购类目</label>
                                            <div class="layui-input-inline">
                                                <select name="stock_category" id="stock_category" lay-verify="required"></select>
                                            </div>
                                        </div>

ajxa动态赋值代码

                success: function (result) {
                    var res = JSON.parse(result.d);
                    if (res.code == 0) { // 请求成功
                        var ele_WareHouse_ID = document.getElementById('WareHouse_ID');
                        var ele_stock_category = document.getElementById('stock_category');
                        res.data.forEach(function (value, index, arr) {
                            var newOpt = document.createElement('option'); newOpt.value = value.value; newOpt.text = value.text;
                            if (value.type == '1') {
                                ele_WareHouse_ID.appendChild(newOpt);
                            }
                            if (value.type == '2') {
                                ele_stock_category.appendChild(newOpt);
                            }
                        });
                    }
                    else { // 发生异常
                        alert(res.msg);
                    }
                },

前端无法显示出下拉框值，调试时后台已经成功返回了下拉项

 

 解决方法

需要重新更新渲染下select下拉框

使用 form.render('select');

修改后的代码如下

                success: function (result) {
                    var res = JSON.parse(result.d);
                    if (res.code == 0) { // 请求成功
                        var ele_WareHouse_ID = document.getElementById('WareHouse_ID');
                        var ele_stock_category = document.getElementById('stock_category');
                        res.data.forEach(function (value, index, arr) {
                            var newOpt = document.createElement('option'); newOpt.value = value.value; newOpt.text = value.text;
                            if (value.type == '1') {
                                ele_WareHouse_ID.appendChild(newOpt);
                            }
                            if (value.type == '2') {
                                ele_stock_category.appendChild(newOpt);
                            }
                        });
                        form.render('select');  // 重新渲染
                    }
                    else { // 发生异常
                        alert(res.msg);
                    }
                },

问题解决