首页 > 其他 > 详细

layui 动态绑定select

时间:2020-08-15 14:27:35      阅读:562      评论:0      收藏:0      [点我收藏+]

前言

需求:动态渲染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模块。否则无效果。

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

layui 动态绑定select

原文:https://www.cnblogs.com/ZengJiaLin/p/13508452.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!