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

页面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. 通过实战理解C语言精要——函数篇

      前言 本篇博客是对C语言函数部分的重点内容和细枝末节通过实战得到的经验的总结精炼,不涵盖C语言函数的全部内容,所有提炼内容均来自提炼与实战,阅读需要对函数部分有一定基础,可用于对C语言函数的理解提 ...

  2. C#进阶系列——DDD领域驱动设计初探(七):Web层的搭建

    前言:好久没更新博客了,每天被该死的业务缠身,今天正好一个模块完成了,继续来完善我们的代码.之前的六篇完成了领域层.应用层.以及基础结构层的部分代码,这篇打算搭建下UI层的代码. DDD领域驱动设计初 ...

  3. Linux -- CentOS7修改防护墙端口

    CentOS升级到7之后,发现无法使用iptables控制Linuxs的端口,原因是Centos 7使用firewalld代替了原来的iptables.下面记录如何使用firewalld开放Linux ...

  4. pyhton 学习

    官方学习文档 https://docs.python.org/3/tutorial/

  5. python word

    代码: #coding=utf-8 __author__ = 'zhm' from win32com import client as wc import os import time import ...

  6. 面向对象(Object-Oriented)

    面向对象 面向对象,即我们以对象为核心去实现我们的目的,对象顾名思义:万物皆对象,一个人,一条狗... 当我们通过对象处理一些事情时,会让我们的代码清晰明了,内部高聚合,对外低耦合,即封装的思想 相比 ...

  7. 【BZOJ-3507】通配符匹配 DP + Hash

    3507: [Cqoi2014]通配符匹配 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 372  Solved: 156[Submit][Statu ...

  8. Jsoup提取文本时保留标签

    使用Jsoup来对html进行处理比较方便,你可能会用它来提取文本或清理html标签.如果你想提取文本时保留标签,可以使用Jsoup.clean方法,参数为html及标签白名单: Jsoup.clea ...

  9. Unity 小问题

    Cannot cast from source type to destination 我用Object 转 int 会出现这个错误提示 例如 : object p; int pp = (int)p; ...

  10. ubuntu14.04 安装pycharm

    参考链接: http://itsfoss.com/install-pycharm-ubuntu/ 怎样在ubuntu14.04上安装pycharm pycharm是一款为python开发而生的IDE. ...