layui select动态添加option的实例


Posted in Javascript onMarch 07, 2018

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('');
  }
 })
}

以上这篇layui select动态添加option的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
layui表格checkbox选择全选样式及功能的实例
Mar 07 #Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 #Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 #Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 #Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 #Javascript
Vue中v-for的数据分组实例
Mar 07 #Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 #Javascript
You might like
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
stripos函数知识点实例分享
2019/02/11 PHP
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python 容器总结整理
2017/04/04 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
关于青春的演讲稿
2014/05/05 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
中学推普周活动总结
2015/05/07 职场文书
海上钢琴师观后感
2015/06/03 职场文书