layui select动态添加option的实例

 更新时间:2018年03月07日 16:07:48   作者:秃子Sir   我要评论

下面小编就为大家分享一篇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('');
  }
 })
}

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

相关文章

  • JS数组去重的6种方法完整实例

    JS数组去重的6种方法完整实例

    这篇文章主要介绍了JS数组去重的6种方法,结合完整实例形式总结分析了javascript针对数组去除重复项的相关原理与操作技巧,需要的朋友可以参考下
    2018-12-12
  • js脚本实现数据去重

    js脚本实现数据去重

    最近在一个项目中,需要去除掉重复的数据,之前都是在后台实现,现在客户需求是在前台去重,于是就想到了javascript脚本。
    2014-11-11
  • js简易namespace管理器 实例代码

    js简易namespace管理器 实例代码

    js简易namespace管理器 实例代码,需要的朋友可以参考一下
    2013-06-06
  • 关于js数组去重的问题小结

    关于js数组去重的问题小结

    在项目开发过程中经常会遇到数组中包含很多重复的内容,即脏数据去脏的操作,本文着重讲解了数组去重的几种方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • js实现可拖动DIV的方法

    js实现可拖动DIV的方法

    这篇文章主要介绍了js实现可拖动DIV的方法,有需要的朋友可以参考一下
    2013-12-12
  • JS模拟面向对象全解(二、类型与赋值)

    JS模拟面向对象全解(二、类型与赋值)

    上次,我讲了有关类型区别和传递的问题,现在,我给大家在插上一点有关类型赋值的问题。
    2011-07-07
  • javascript 中关于array的常用方法详解

    javascript 中关于array的常用方法详解

    这篇文章主要介绍了javascript 中关于array的常用方法的相关资料,需要的朋友可以参考下
    2017-05-05
  • js格式化时间的方法

    js格式化时间的方法

    这篇文章主要介绍了js格式化时间的方法,对javascript时间格式化的方法进行了总结,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 使用Javascript简单计算器

    使用Javascript简单计算器

    这篇文章主要为大家详细介绍了使用Javascript简单计算器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript实现复制或剪切内容到剪贴板功能的方法

    JavaScript实现复制或剪切内容到剪贴板功能的方法

    这篇文章主要介绍了JavaScript实现复制或剪切内容到剪贴板功能的方法,我们平时看到的网页上很多一键复制功能就是如此实现,需要的朋友可以参考下
    2016-05-05

最新评论