layui 動態綁定select

前言

需求：動態渲染select后重新綁定數據。

具體步驟

設置綁定的容器

代碼如下所示：

<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"樣式。**

聲明form模塊 重新渲染

引用<script src="~/Pulgs/layui/layui.js"></script>后

代碼如下所示：

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

請求數據 重新渲染綁定

代碼如下所示：

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模塊。否則無效果。

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