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

页面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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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();
}
});
});

[jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示的更多相关文章

  1. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  2. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  3. excel选择元角分下拉菜单选择框自动变更数字

    excel选择元角分下拉菜单选择框自动变更数字 (M2列),数据-->数据有效性-->在“允许”栏中选择序列-->在“来源”栏中输入:分,角,元单位倍数公式(M4列):=IF(M2= ...

  4. Atitit.ui控件---下拉菜单选择控件的实现select html

    Atitit.ui控件---下拉菜单选择控件的实现select   html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...

  5. jQuery实现多级手风琴树形下拉菜单(源码)

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  6. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  7. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  8. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  9. 获取select文本框的下拉菜单文字内容的两种方式

    <body> <div class="box"> <select id="sel"> <option value=&q ...

随机推荐

  1. 【跟着子迟品 underscore】for ... in 存在的浏览器兼容问题你造吗

    Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...

  2. jQuery之XML的加载和解析

    1.XML(eXtensible Markup Language)即可扩展标记语言,与HTML一样,都是SGML标准通用语言.语法如下: 任何起始标签都必须有一个结束标签. 可以采用另一种简化语法,即 ...

  3. python 小练手

    监控 主动监控 - 服务器端轮询客户端 被动监控-客户端agent上报到服务器端 混合模式---两种都支持 需求 1个性化的监控需求 2每个服务的监控间隔不同 3混合模式的监控

  4. AOJ DSL_2_E Range Add Query (RAQ)

    Range Add Query 数列 A = {a1,a2,...,an} に対し.次の2つの操作を行うプログラムを作成せよ. add(s,t,x): as,as+1,...,at にxを加算する. ...

  5. a版本冲刺第七天

    队名:Aruba   队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章  鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 学习活动的消息传递和日志分析 因为大家都在赶进 ...

  6. RHEL7 CentOS7 检查查看精简指令

    RHEL7 CentOS7 检查查看精简指令: //////////////////////////检查查看精简指令://///////////////////////////// ///////// ...

  7. php.ini 中文注释

    这个文件控制了PHP许多方面的观点.为了让PHP读取这个文件,它必须被命名为 ; ´php.ini´.PHP 将在这些地方依次查找该文件:当前工作目录:环境变量PHPRC ; 指明的路径:编译时指定的 ...

  8. php htmlentities函数的问题

    看到在细说php第二版教程中的函数htmlentities 例子,实际实验没有效果 $str = "一个 'quote' 是<b>bold</b>";ech ...

  9. 10月30日下午 PHP精确查询(模糊查询、模糊+关键字共同查询)

    1.一个条件的模糊查询 <body> <br /> <form action="main.php" method="post"&g ...

  10. JSP动作元素之useBean、setProperty、getProperty指令

    简介 这三个指令都是与JavaBean相关的指令,其中useBean指令用于在JSP页面中初始化一个Java实例:setProperty指令用于为JavaBean实例的属性设置值:getPropert ...