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模块。否则无效果。

你知道的越多，你不知道的越多。我们不生产知识，我们只是知识的搬运工。