[jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示
今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容
页面HTML代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
添加、删除与下拉菜单美化的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(); } }); });