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的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript 星级评分效果(手写)

    javascript 星级评分效果(手写)

    今天上午抽空随手写了个星级评分的效果,给大家分享下。由于水平有限,如有问题请指出;首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态,需要的朋友可以参考下
    2012-12-12
  • JS获取input file绝对路径的方法(推荐)

    JS获取input file绝对路径的方法(推荐)

    下面小编就为大家带来一篇JS获取input file绝对路径的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • NestJs 静态目录配置详解

    NestJs 静态目录配置详解

    这篇文章主要介绍了NestJs 静态目录配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • HTML5+JS+JQuery+ECharts实现异步加载问题

    HTML5+JS+JQuery+ECharts实现异步加载问题

    这篇文章主要介绍了HTML5+JS+JQuery+ECharts实现异步加载问题,需要的朋友可以参考下
    2017-12-12
  • 获取layer.open弹出层的返回值方法

    获取layer.open弹出层的返回值方法

    今天小编就为大家分享一篇获取layer.open弹出层的返回值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript实现计数器基础方法

    JavaScript实现计数器基础方法

    这篇文章主要为大家详细介绍了JavaScript实现计数器的基础方法 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • bootstrap为水平排列的表单和内联表单设置可选的图标

    bootstrap为水平排列的表单和内联表单设置可选的图标

    为水平排列的表单和内联表单设置可选的图标。本文通过示例代码给大家讲解,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-02-02
  • javascript 获取图片颜色

    javascript 获取图片颜色

    html 5.0的canvas可以获取到图片的像素点了。这样,我们可以做很多以图片有关的操作和渲染了。当然今后也会给浏览器渲染引擎更高的要求。(YY, 什么时候html渲染引擎也支持多核和GPU呢?)
    2009-04-04
  • Javascript异步执行不按顺序解决方案

    Javascript异步执行不按顺序解决方案

    这篇文章主要介绍了Javascript异步执行不按顺序解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • DOM 脚本编程中的兄弟节点

    DOM 脚本编程中的兄弟节点

    兄弟节点之间可以通过 previousSibling 和 nextSibling 属性访问同一级别上的不同子节点。这个兄弟节点是元素还是文本节点在现代浏览器上运行是怎么样的呢?
    2009-10-10

最新评论