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

页面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. 浅谈js命名空间管理

    在C# 和 Java里面我们如果想使用哪一个功能类就要引用相应的命名空间. 如C#里面有个System.Web.UI库,我们就要用using   System.Web.UI;,之后我们就可以用到Scr ...

  2. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  3. 【UOJ #246】【UER #7】套路

    http://uoj.ac/contest/35/problem/246 神奇!我这辈子是想不出这样的算法了. 对区间长度分类讨论:题解很好的~ 我已经弱到爆了,看完题解后还想了一晚上. 题解中&qu ...

  4. 关于select那点事

    select: 通过监视多个文件描述符的数组.当select()返回后 文件描述符便会被内核修改标志位,使进程 能进行后续操作 ------------------------------------ ...

  5. IIS注册.netframework4.0指令

    C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i

  6. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  7. nginx虚拟主机配置小结

    nginx的安装在lnmp环境搭建中已经介绍过了,配置文件在安装目录下的conf子目录下,主要主要分成四部分:main(全局设置).server(主机设置).upstream(负载均衡服务器设置).l ...

  8. Join Attributes

    1. IWorkspaceFactory2 workspaceFactory = new ShapefileWorkspaceFactoryClass() as IWorkspaceFactory2; ...

  9. python 模块基础介绍

    从逻辑上组织代码,将一些有联系,完成特定功能相关的代码组织在一起,这些自我包含并且有组织的代码片段就是模块,将其他模块中属性附加到你的模块的操作叫做导入. 那些一个或多个.py文件组成的代码集合就称为 ...

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

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