zoukankan      html  css  js  c++  java
  • layui select动态添加option

    <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('');
            }
        })
    }
  • 相关阅读:
    小米手机导出微信聊天记录
    IBM X3650 M4 微码升级(BIOS升级)
    leetcode1987 不同的好子序列数目
    leetcode1932 合并多棵二叉搜索树
    leetcode146 LRU 缓存机制
    leetcode456 132 模式
    leetcode316 去除重复字母
    GIT放弃本地所有修改,强制拉取更新
    vendor/easywechat-composer/easywechat-composer/src:
    微信公众号推广饿了么赏金红包制作
  • 原文地址:https://www.cnblogs.com/nongzihong/p/10925964.html
Copyright © 2011-2022 走看看