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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php微信公众号开发模式详解
2016/11/28 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
JS实现放大镜效果
2020/09/21 Javascript
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
简单实现python聊天程序
2018/04/01 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python可视化实现代码
2019/01/15 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
《宿建德江》教学反思
2014/04/23 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
2015员工年度考核评语
2015/03/25 职场文书
禁毒主题班会教案
2015/08/14 职场文书
合作协议书格式范本
2016/03/21 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers