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 new关键字的玄机 以及其它
Aug 25 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
javascript实现拼图游戏
Jan 29 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的ob_start来生成静态页面的方法分析
2011/03/09 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
用js实现放大镜效果
2020/10/28 Javascript
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
python版学生管理系统
2018/01/10 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Python类成员继承重写的实现
2020/09/16 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
入党自我鉴定范文
2013/10/04 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书