zoukankan      html  css  js  c++  java
  • [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容

    页面HTML代码

    <ul class="list-group xj-list-NObor xj-configuration-list">
        <li class="list-group-item clearfix">
            <div class="col-lg-1 xj-label-height xj-paddingRight0">选择字段:
            </div>
            <div class="col-lg-2 xj-paddingLeft0">
                <a class="btn-select fl" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">请假人</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val=""><option value=""></option><option value="4">票据类型1</option><option value="5">票据类型2</option></select>
                </a>
            </div>
            <div class="col-lg-1 xj-label-height text-right xj-paddingRight0">选择搜索控件类型:
            </div>
            <div class="col-lg-2">
                <a class="btn-select fl" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">关键字精确搜索</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val=""><option value=""></option><option value="4">票据类型1</option><option value="5">票据类型2</option></select>
                </a>
            </div>
            
            <div class="col-lg-1 pull-right text-right"><a class="btn btn-default xj-btn xj-btn-normal soaDelete"  href="javascript:;">删除</a>
            </div>
        </li>
        <li class="list-group-item clearfix">
            <div class="col-lg-1 xj-label-height xj-paddingRight0">选择字段:
            </div>
            <div class="col-lg-2 xj-paddingLeft0">
                <a class="btn-select fl" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">请假原因</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val=""><option value=""></option><option value="4">票据类型1</option><option value="5">票据类型2</option></select>
                </a>
            </div>
            <div class="col-lg-1 xj-label-height text-right xj-paddingRight0">选择搜索控件类型:
            </div>
            <div class="col-lg-2">
                <a class="btn-select fl" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">关键字模糊搜索</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val=""><option value=""></option><option value="4">票据类型1</option><option value="5">票据类型2</option></select>
                </a>
            </div>
            
            <div class="col-lg-1 pull-right text-right"><a class="btn btn-default xj-btn xj-btn-normal soaDelete"  href="javascript:;">删除</a>
            </div>
        </li>
        
        <li class="list-group-item clearfix">
            <div class="col-lg-1 xj-label-height xj-paddingRight0">选择字段:
            </div>
            <div class="col-lg-2 xj-paddingLeft0">
                <a class="btn-select fl" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">审批状态</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val=""><option value=""></option><option value="4">票据类型1</option><option value="5">票据类型2</option></select>
                </a>
            </div>
            <div class="col-lg-1 xj-label-height text-right xj-paddingRight0">选择搜索控件类型:
            </div>
            <div class="col-lg-2">
                <a class="btn-select fl" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">字段内容筛选</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val=""><option value=""></option><option value="4">票据类型1</option><option value="5">票据类型2</option></select>
                </a>
            </div>
            <div class="col-lg-1 xj-paddingLeft0">
             
            <a class="btn-select fl btn-select-n" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">日期</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val="">
                        <option value=""></option>
                        <option value="4">票据类型1</option>
                        <option value="5">票据类型2</option>
                    </select>
                </a>
            
            </div>
            <div class="col-lg-1 pull-right text-right"><a class="btn btn-default xj-btn xj-btn-normal soaDelete"  href="javascript:;">删除</a>
            </div>
        </li>
        <li class="list-group-item clearfix">
            <div class="col-lg-1 xj-label-height xj-paddingRight0">选择字段:
            </div>
            <div class="col-lg-2 xj-paddingLeft0">
                <a class="btn-select fl" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">提交时间</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val=""><option value=""></option><option value="4">票据类型1</option><option value="5">票据类型2</option></select>
                </a>
            </div>
            <div class="col-lg-1 xj-label-height text-right xj-paddingRight0">选择搜索控件类型:
            </div>
            <div class="col-lg-2">
                <a class="btn-select fl" id="btn_select02">
                    <div class="btn-select-div clearfix">
                        <span class="cur-select">时间段搜索</span>
                        <span class="cur-select-icon"><img src="images/ico-arrow.png" width="10" height="5"></span>
                    </div>
                    <select name="bill_type_id" id="bill_type_id" data-val=""><option value=""></option><option value="4">票据类型1</option><option value="5">票据类型2</option></select>
                </a>
            </div>
            
            <div class="col-lg-1 pull-right text-right"><a class="btn btn-default xj-btn xj-btn-normal soaDelete"  href="javascript:;">删除</a>
            </div>
        </li>
        <li class="list-group-item clearfix">
            <div class="col-lg-2 pull-right text-right">
                <button type="button" id="addList" class="btn btn-primary xj-btn xj-btn-primary xj-btn-primary-lg">添加搜索项</button>
            </div>
        </li>
    </ul>
    View Code

    添加、删除与下拉菜单美化的JS代码

    //下拉菜单功能
    "selectDefault":function(){
        $("select").each(function(i){
            var text = $(this).find("option:selected").text();
            var p = $(this).parent();
            var tag = p.get(0).tagName;
            tag = tag.toUpperCase();
            if(tag == "DIV")
                $(this).parent().prev().find(".cur-select").text(text);
            else
                $(this).prev().find(".cur-select").text(text);
        })
    },
    "selectChange":function(){
        $('#wrapper').on('change', 'select', function () {
            var text = $(this).find("option:selected").text();
            var p = $(this).parent();
            var tag = p.get(0).tagName;
            tag = tag.toUpperCase();
            if(tag == "DIV")
                $(this).parent().prev().find(".cur-select").text(text);
            else
                $(this).prev().find(".cur-select").text(text);
        });
    }
    
    //添加删除行
    $("#addList").click(function(){
        var str = $("ul.xj-configuration-list li:first");
        $(".xj-configuration-list li:first").before(str);
    });
    $(".soaDelete").click(function(){
        $(this).parents("li").remove();    
    });

    对比判断JS代码

    $("select").change(function(){
       var toSel = $(this).parents("a.btn-select").find("span.cur-select").text();
        $(this).parents("li.list-group-item").siblings("li.list-group-item").each(function(){
          if(toSel == $(this).find("span.cur-select").text() ){
                $(".abandon_query_notice").html('该字段已经存在');
                $("#modal_abandon").modal();
            }
        });
    });
  • 相关阅读:
    如何设置范围,使透视数据源记录可以自适应地改变
    Atitit..文件上传组件选择and最佳实践的总结(2)----HTTP
    AIDL(1)
    最好的年龄减肥
    2012在数据库技术会议上的讲话PPT打包
    左右 Java 于 finally 深度分析语句块
    R0-R37它是Arm 寄存器,那是,CPU内部。和GPIO注册所有外设。换句话说,要是arm的cpu,它包含了其他芯片公司将有R0-R37,和GPIO寄存器只有一个特定的芯片。
    使用方便 正则表达式grep,sed,awk(一)
    经验36--C#无名(大事,物...)
    IOS 图片压缩
  • 原文地址:https://www.cnblogs.com/zhixi/p/5482097.html
Copyright © 2011-2022 走看看