[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();
        }
    });
});
原文地址:https://www.cnblogs.com/zhixi/p/5482097.html