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弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
javascript实现下雨效果
Mar 27 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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调用Webservice实例代码
2011/07/29 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
原生js+css实现tab切换功能
2020/09/17 Javascript
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python 常用的基础函数
2018/07/10 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
浅谈Python type的使用
2019/11/19 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
门诊手术室工作制度
2014/01/30 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
读书月活动方案
2014/05/22 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL