• 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('');
            }
        })
    }
  • 相关阅读:
    ASP.NET中JS简单调用webservices的方法
    WINDOWS SERVER 2003使用IIS服务配置WEB站点(转)
    Tomcat安装配置(转)
    javascript 调用.net后台的数据 和方法
    win7下,sql2005安装,提示 iis功能和com+目录要求 的解决
    Vista或windows7远程桌面控制服务器较慢 反应迟钝
    Asp.net Ajax的使用
    记录远程登陆用户的IP
    Ext.menu.Menu 属性及基础应用
    关于VS2005 无法使用切换到设计视图的解决方法
  • 原文地址:https://www.cnblogs.com/nongzihong/p/10925964.html
Copyright © 2020-2023  润新知