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);
                    }
                },

問題解決