Layui下拉框的绑定

开发工具与关键技术：mvc、layui、js、html 作者：张俊辉 撰写时间：2019年04月8日

• 对于Layui表单中的表单下拉框绑定中，我们会发现绑定上去了却没显示出来，那是因为你绑定的下拉框与layui插件表单渲染后的下拉框并不是同一个元素、同一个标签组成，因此绑定不了,该如何绑定下拉框其实只需要使用Layui里一个自带的方法——更新渲染form.render(); //更新全部form.render(‘select’); //刷新select选择框渲染 ，但我建议使用更新全部的方法，因为在使用更新select选择框渲染时因延迟问题当，用户进入页面就开始点击下拉框时，会绑定不了！插件需使用jQuery与Layui,代码如下:
  HTML代码：

<form class="layui-form" lay-filter="InsertPurchasingManagement">
	<div class="layui-form-item">
		<div class="layui-inline">
           <label class="layui-form-label">付款方式</label>
           <div class="layui-input-inline">
              <select lay-verify="required" name="PaymentModeID" class="SelectPaymentMode">
                 <option value="">请选择</option>
              </select>
          </div>
      </div>
	</div>
</form>

JS代码：

$(function () {
//付款方式(下拉框)
    $.post("/Purchase/SupplierMessage/SelectPaymentMode", function (data) {
          for (var k in data) 
          {
          $(".SelectPaymentMode").append("<option value='" + data[k].id + "'>" + data[k].text + "</option>");
          }
          layui.use('form', function () {
               var form = layui.form;
               form.render();
           });
       });
}

对于封装的下拉框绑定方法则只需要在执行完绑定方法后执行下列代码即可：

layui.use('form', function () {
      var form = layui.form;
      form.render();
});

效果图如下：
对于一些初始值绑定的下拉框，只需要在赋值之后再执行更新全部的方法。代码如下：

//数据回填
layui.use('form', function () {
      var form = layui.form;
      form.val("ExaminePurchasingManagement", data);
      if (data.Tax == false) {
         $("#ExaminePN select[name='Tax']").val("false")
      }
      if (data.Tax == true) {
         $("#ExaminePN select[name='Tax']").val("true")
      }
      form.render();
});

效果图如下：