如何動態在LayUI中添加Select下拉框選項和Option？

1.【HTML】中的代碼。在select中記得添加一個id屬性。

<select name="goods_audit_status" id="GetAudit_status" lay-verify="goods_audit_status">
     <!--動態添加-->
</select>

 

1-1.博主是使用C#的webapi從后台獲得數據。

 

2.【JS】中的代碼。在js中寫一個方法，將獲取到的數據遍歷，然后進行綁定。記住"data[i].CategoryId"需要和使用Ajax請求的數據保持一致才行。

 //獲取商品的【狀態信息】，綁定到Select下拉框上
            function GetAudit_status(element, url, type, title) {
                $.ajax({
                    url: url,
                    type: type,
                    success: function (data) {
                        if (data != "" && data != null) {
                            var html1 = '<dd lay-value="" class="layui-select-tips layui-this">' + title + '</dd>';
                            var html2 = '<option value="" >' + title + '</option>';
                            for (var i = 0; i < data.length; i++) {
                                html1 += '<dd lay-value="' + data[i].CategoryId + '">' + data[i].CategoryName + '</dd>';
                                html2 += '<option value="' + data[i].CategoryId + '">' + data[i].CategoryName + '</option>';
                            }
                            $(element).next().children().eq(1).html(html1);
                            $(element).html(html2);
                            form.render();//沒有寫這個，操作后沒有效果
                        }
                    }
                })
            }

 

3.調用上面的那個方法。

第一個參數：綁定的DOM元素

第二個參數：請求的地址

第三個參數：請求的方式

第四個參數：option的第一項內容

   GetAudit_status("#GetAudit_status", "/Goods/GetAudit_status", "post", "選擇商品狀態");//商品狀態

 

4.可以看出數據是綁定成功了的。