内容简介:下面小编就为大家分享一篇layui select动态添加option的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
html
<form class="layui-form" action=""> <div class="layui-form-item proSelect"> <label class="layui-form-label">产品类别</label> <div class="layui-input-block editWidth"> <select name="productList" lay-verify="required" id="zcySelect"> <option value=""></option> <option value="0">轻松融</option> <option value="1">容易融</option> <option value="2">快乐融</option> </select> </div> </div> <a class="layui-btn layui-btn-small" id="" onclick="addProductClassify()">增加产品类别</a> </form> <!--弹窗内容--> <div id="select_prod" class="layui-form" hidden="hidden"> <div class="layui-input-inline"> <input type="text" name="text" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div>
js
//重新渲染表单 function renderForm(){ layui.use('form', function(){ var form = layui.form();//高版本建议把括号去掉,有的低版本,需要加() form.render(); }); } //增加产品类别按钮点击事件 function addProductClassify(){ layer.open({ type:1, btn:['确定','取消'], content:$("#select_prod"), area:['270px','160px'], //当前层索引参数(index)、当前层的DOM对象(layero) yes:function(index,layero){ //获取input输入的值 var ivalue=$(layero).find("input").val(); //获取要添加的option的索引 var sIndex=$("#zcySelect")[0].options.length-1; if(ivalue==null||ivalue==''){ layer.msg("请输入产品类别") } else{ layer.msg("输入的产品类别是:"+ivalue); //为select添加option $("#zcySelect").append("<option value="+sIndex+">"+ivalue+"</option>"); renderForm();//表单重新渲染,要不然添加完显示不出来新的option layer.close(index); } $(layero).find("input").val(''); } }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- jsp 使用request为页面添加静态数据的实例
- java – Lucene 6.0!如何实例化BooleanQuery并在其中添加其他搜索查询?
- JVM指令分析实例三(方法调用、类实例)
- 主动模式和被动模式,添加监控主机,添加自定义模板,处理图像中的乱码,自动发现
- 苹果将为 Mac 添加 Face ID,为 Magic Keyboard 添加 Touch Bar
- android – 为什么AOSP添加新的API来支持库而不添加到SDK?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
互联网创业核心技术:构建可伸缩的web应用
【美】Artur Ejsmont / 李智慧、何坤 / 电子工业出版社 / 2016-12 / 89
可伸缩架构技术是所有互联网技术中最重要,也是最引人入胜的技术。《互联网创业核心技术:构建可伸缩的web应用》针对互联网创业需求快速迭代,业务快速发展,短时间内用户、数据、访问量激增的特点,提纲挈领地描述了伸缩性架构的基本原理与设计原则,详细阐述了Web应用前端层、服务层、数据层的可伸缩架构,并花大量篇幅讲述了缓存技术和异步处理技术的可伸缩设计及其在Web系统中的具体应用。 《互联网创业核心技......一起来看看 《互联网创业核心技术:构建可伸缩的web应用》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
RGB CMYK 转换工具
RGB CMYK 互转工具