Layui下拉框的绑定

最新推荐文章于 2025-06-07 13:52:41 发布

原创最新推荐文章于 2025-06-07 13:52:41 发布 · 1.3w 阅读

19 ·

CC 4.0 BY-SA版权

专题技术专栏收录该内容

35 篇文章

订阅专栏

开发工具与关键技术：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();
});