layui动态添加select选择框和回显

最新推荐文章于 2024-01-17 09:23:41 发布

原创最新推荐文章于 2024-01-17 09:23:41 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端资料专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的按钮点击事件，该事件用于动态添加包含选择器的表单元素，并实现了删除功能。文章详细展示了如何通过jQuery为按钮绑定点击事件，以及如何在点击后动态生成并插入新的表单项。

//点击事件的按钮
 <button type="button" class="layui-btn" id="addpeop">
            <i class="layui-icon">&#xe608;</i>
        </button>
  $("#addpeop").click(function(){

 var peop=$("#areas");

var t=$(['<div class="layui-form-item" id="areas">',
	'<label class="layui-form-label">绑定医院</label>',
'<div class="layui-form layui-input-inline"  lay-filter="provinces">',
   '<select name="province" id="provinces'+i+'"  lay-search="" class="state">',
 '</select>',
      '</div>',

 '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="del">删除</button>',
                        '</div>'].join(''));
                    t.find('#del').on('click', function(){
                        t.remove();
                    });
                    prosle(i);

                    i=i+1;

                    peop.after(t);
                    layui.form.render("select");
                })
            })
//结束添加
//回显动态框
{//赋值可选的也就是动态生成的select
 var peop=$("#areas");/* ;*/
prosle(indexs);
 var t=$(['<div class="layui-form-item" id="areas">',
'<label class="layui-form-label">绑定医院</label>',
'<div class="layui-form layui-input-inline"  lay-filter="provinces" >',
  '<select name="province" id="provinces'+indexs+'"  lay-search="" class="state">',
     '<option selected value='+ item.hosid+ '> '+ item.hosname + ' </option>',//绑定医院
      '</select>',
            '</div>',
 '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="del">删除</button>',
     '</div>'].join(''));
   t.find('#del').on('click', function(){
     t.remove();
   });
  peop.after(t);
 layui.form.render("select");
}
 indexs=indexs+1;//循环一次加一