[jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示

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

页面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]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示的更多相关文章

jQuery插件：模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
jQuery实现一个淡入淡出下拉菜单非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...
excel选择元角分下拉菜单选择框自动变更数字
excel选择元角分下拉菜单选择框自动变更数字 (M2列),数据-->数据有效性-->在“允许”栏中选择序列-->在“来源”栏中输入:分,角,元单位倍数公式(M4列):=IF(M2= ...
Atitit.ui控件---下拉菜单选择控件的实现select html
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...
jQuery实现多级手风琴树形下拉菜单（源码）
前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...
jQuery 实现无限任意添加下拉菜单
新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...
基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
获取select文本框的下拉菜单文字内容的两种方式
<body> <div class="box"> <select id="sel"> <option value=&q ...

随机推荐

SQLite剖析之事务处理技术
前言事务处理是DBMS中最关键的技术,对SQLite也一样,它涉及到并发控制,以及故障恢复等等.在数据库中使用事务可以保证数据的统一和完整性,同时也可以提高效率.假设需要在一张表内一次插入20个人的 ...
VMware Workstation中网络连接之桥接、NAT和Host-only
在Windows XP系统中,安装好VMware Workstation虚拟机软件以后,我们可以查看一下"网络连接"窗口: 在窗口中多出了两块网卡: VMware Network ...
Java链栈
package com.lxm.customDataStructure; public class LinkStack<T>{ class Node<T>{ T data; N ...
一次kibana小问题排查的过程记录
起因中午业务组同事报告说kibana服务不能正常使用,登录kibana前端查看,网站能够访问,但是页面显示仅有title部分而无内容部分. 排查首先确认kibana服务是否正常,登录kuberne ...
java之线程
java之线程一:线程: 线程是什么呢?线程,有时被称为轻量级进程是程序执行流的最小单元.一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成.另外,线程是进程中的一个实体,是被系统 ...
java 中的Scanner
java.util.Scanner是Java5的新特征,主要功能是简化文本扫描.这个类最实用的地方表现在获取控制台输入,其他的功能都很鸡肋,尽管Java API文档中列举了大量的API方法,但是都不怎 ...
WinForm------PanelControl控件中使用Pen类画角圆矩形方法
private void rightPanel_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Pen p = ,, ...
mysql设置远程访问权限
查一下你的MYSQL用户表里, 是否允许远程连接 1.授权 mysql>grant all privileges on *.* to 'root'@'%' identified by ...
thinkphp 模型、控制器、视图
控制器里面调用模型 echo D('Goods')->index(); 调用GoodsModel下index 控制器里面调用其他控制器 echo A('Goods')->index(); ...
Redis常用命令
Redis常用命令Redis提供了丰富的命令对数据库和各种数据类型进行操作,这些命令可以再Linux终端使用.1.键值相关命令2.服务器相关命令一.键值相关命令 1.get get 键值当 key ...

[jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示

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

随机推荐

热门专题