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

页面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. php中关于引用(&)详解

    php中关于引用(&)详解 php的引用(就是在变量或者函数.对象等前面加上&符号) 在PHP 中引用的意思是:不同的变量名访问同一个变量内容. 与C语言中的指针是有差别的.C语言中的 ...

  2. C# 6.0 新特性

    1.C# 6.0 示例 1: 自动属性支持初始化, 字符串嵌入的新方式, 通过 Using Static 引用静态类, nameof 表达式CSharp6/Demo1.xaml.cs /* * C# ...

  3. Mysql 命令大全

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root - ...

  4. 【caffe】绘制网络结构图

    @tags caffe 网络结构 可视化 当拿到一份网络定义文件net.prototxt,可以用工具画出网络结构.最快速的方法是使用在线工具netscope,粘贴内容后shift+回车就可以看结果了. ...

  5. /etc/fstab 文件配置项简单介绍

    Untitled .note-content {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsof ...

  6. elk系列7之通过grok分析apache日志

    preface 说道分析日志,我们知道的采集方式有2种: 通过grok在logstash的filter里面过滤匹配. logstash --> redis --> python(py脚本过 ...

  7. SAX与DOM

    http://www.cnblogs.com/zhulin/archive/2012/05/03/2480962.html 在解析xml时(如浏览器解析html标签),主要存在两种方式:SAX模式和D ...

  8. 第二轮冲刺-Runner站立会议09

    今天:将日历界面和主程序结合起来 明天:查看整个项目,调试是否有问题

  9. UEditor百度编辑器,工具栏上自定义添加一个普通按钮

    添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...

  10. SVN如何查看修改的文件记录] 来源:Linux社区 作者:frogoscar

    SVN如何查看修改的文件记录 [日期:2014-11-20] 来源:Linux社区  作者:frogoscar [字体:大 中 小]     主要是有四个命令,svn log用来展示svn 的版本作者 ...