前言

需求：動態渲染select後重新繫結資料。

具體步驟

1.需要設定繫結的容器。程式碼如下所示：

<div class="layui-form">
  <div class="layui-form-item">
      <div class="layui-form-label"><span style="color:red;">*</span>物料品種</div>
      <div class="layui-input-block">
           <select lay-verify="required" name="cChemCode" id="bindChem">
               <option value=""></option>
           </select>
      </div>
  </div>
</div>

 

** 注意：最外層的可以不是<form>標籤,但是必須要加class="layui-form"樣式。**

2.引用<script src="~/Pulgs/layui/layui.js"></script>後，宣告form模組，重新渲染。程式碼如下所示：

<script src="~/Pulgs/layui/layui.js"></script>
   layui.use('form', function () {
         var form=layui.form;
         form.render();  //重新渲染表單
         QueryChemById(); //呼叫請求資料方法
   });
 

3.請求資料。重新渲染繫結。程式碼如下所示：

function QueryChemById() {
   $.get('請求路徑', function (msg) {
           layui.use('form', function () {
               var form = layui.form;
               if (msg != "") {
                 var str = ''; //宣告字串
                 var mJSON = $.parseJSON(msg);//轉成Json物件 
                 $("#bindChem option:gt(0)").remove();//重新載入前，移除第一個以外的option
                 $.each(mJSON, function (i, obj) {
                    str += '<option value="' + obj.cChemCode + '">' + obj.cChemName + '</option>';
                 });//遍歷迴圈遍歷
                 $(str).appendTo("#bindChem");//繫結
                 $("#bindChem option:eq(1)").attr("selected", 'selected'); //預設選擇第一個選項
                 form.render("select");//注意：最後必須重新渲染下拉框，否則沒有任何效果。
               }
           });
     });             
}

 

注意:如果我們重新寫方法去請求資料的時候，必須在方法裡面重新引用form模組。否則無效果。

你知道的越多，你不知道的越多。我們不生產知識，我們只是知識的搬運工。