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

页面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. 可变长子网掩码 VLSM

    2014-05-05 17:26:08 标签:IP地址 路由器 技术部 路由表 长子 VLSM的介绍: VLSM(VLSM(Variable Length Subnetwork Mask,可变长子网掩 ...

  2. InetAddress类

    InetAddress类是Java对IP地址(包括IPv4和IPv6)的高层表示.大多数其他网络类都要用到这个类,包括Socket,ServerSocket,URL,DatagramSocket,Da ...

  3. HIbernate的property-ref属性

    为公司之前的一个公交卡系统修改bug: 通过排查发现, 卡类型表和卡等级表是一对多的关系, 但是卡等级表中没有字段引用卡类型表的主键,而是引用了卡类型表中非主键的另外两个字段 通过查看hibernat ...

  4. 并查集(union-find)算法

    动态连通性 . 假设程序读入一个整数对p q,如果所有已知的所有整数对都不能说明p和q是相连的,那么将这一整数对写到输出中,如果已知的数据可以说明p和q是相连的,那么程序忽略p q继续读入下一整数对. ...

  5. 分布式数据库Hbase

    HBase – Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群. HBase是Goog ...

  6. MySQL插入数据返回id

    按照应用需要,常常要取得刚刚插入数据库表里的记录的ID值,在MYSQL中可以使用LAST_INSERT_ID()函数,在MSSQL中使用 @@IDENTITY.挺方便的一个函数.但是,这里需要注意的是 ...

  7. yii2 composer安装

    安装Yii2 1.安装composer 在命令行输入 curl-sS https://getcomposer.org/installer | php mv composer.phar /usr/loc ...

  8. 如何合并两个Docker 镜像

    http://www.open-open.com/lib/view/open1437746544709.html 在你的机器上使用docker pull来从Docker Hub下载镜像. docker ...

  9. mysql中find_in_set()函数的使用

    首先举个例子来说: 有个文章表里面有个type字段,它存储的是文章类型,有 1头条.2推荐.3热点.4图文等等 .现在有篇文章他既是头条,又是热点,还是图文,type中以 1,3,4 的格式存储.那我 ...

  10. ActiveMQ启动多个broker

    具体步骤如下: 1.把activemq目录下的conf文件复制一份,叫做conf2, 命令: cp -r conf conf2 2.修改conf2目录下的activemq.xml文件 a.修改brok ...