JS 实现下拉框去重

学习内容：

需求

用 JS 下拉框去重

实现代码

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>下拉框去重</title>

    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">

    </script>

    <script>

        function distinct() {

            // 先获取右边 select 中 option 获取 value 属性值，存到一个数组中

            var arr = [];

            /** $(selector).each(function(index,element))

             *  index：遍历元素下标，0 开始

             *  element：遍历元素的一个变量

             */

            $('#s2 > option').each(function(i, domEle){

                var val = $(domEle).val();

                arr.push(val); // 往数组最后添加一个元素

            });

            console.log(arr);

            // 遍历左边 select 中 option 获取其 value 值，跟上面数组中到对比，若存在，则删除对应 option

            $('#s1 > option').each(function(i, domEle){

                var $option = $(domEle);

                var val = $option.val();

                if($.inArray(val, arr) >= 0){ // 此 val 在数组存在

                    $option.remove(); // 删除对应 option 元素

                }

            });

        }

    </script>

</head>

<body>

<table border="1">

    <tr>

        <td>

            <select id="s1" style="width:100px;" size="10"

                    multiple="multiple" >

                <option value="1">选项1</option>

                <option value="2">选项2</option>

                <option value="3">选项3</option>

                <option value="4">选项4</option>

                <option value="5">选项5</option>

            </select>

        </td>

        <td align="center">

            <input type="button" value="去除重复" onclick="distinct();"/>

            <br/>

        </td>

        <td>

            <select id="s2" style="width:100px;" size="10"

                    multiple="multiple" >

                <option value="1">选项1</option>

                <option value="3">选项3</option>

                <option value="5">选项5</option>

            </select>

        </td>

    </tr>

</table>

</body>

</html>

总结：

以上就是用 JS 实现下拉框去重，代码的简单实现了，仅供参考，欢迎讨论交流。

JS 实现下拉框去重的更多相关文章

  1. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  2. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  3. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  4. JS 实现下拉框回显

    JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...

  5. JS实现下拉框选中不同的项，对应显示不同的信息

    实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...

  6. 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...

  7. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

  8. js 设置下拉框的默认值

    设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...

  9. js绑定下拉框

    ---恢复内容开始--- 方法一 js-ajax部分 function GetDListOfCt() { $.ajax({ url: "../../Ajax/Boss_Show.ashx?t ...

随机推荐

  1. GAN实战笔记——第七章半监督生成对抗网络（SGAN）

    半监督生成对抗网络 一.SGAN简介 半监督学习(semi-supervised learning)是GAN在实际应用中最有前途的领域之一,与监督学习(数据集中的每个样本有一个标签)和无监督学习(不使 ...

  2. jarvisoj_level3

    自己的第一篇博客 *其实很早就想写博客了但是自己安全学的比较晚而且也很菜,现在虽然还是比较菜但是也是有一些心得的 *第一个问题什么是ctf,根据某度来说:CTF(Capture The Flag)中文 ...

  3. java控制流学习

    java流程控制学习 Scanner对象 概念 1.通过Scanner类实现程序和人的交互,通过它获取到用户的输入.java.util.Scanner是java5的特征. 我们可以通过Scanner类 ...

  4. MySql 和SQLServer 申明变量以及赋值

    sql server中变量要先申明后赋值: 局部变量用一个@标识,全局变量用两个@(常用的全局变量一般都是已经定义好的): 申明局部变量语法:declare @变量名 数据类型:例如:declare ...

  5. Mybatis将mapper映射文件配置到recources下

    关于为什么要将Mybatis的mappers.xml文件配置到resources目录下的粗浅看法: (1).使文件目录更加清晰.resources文件目录下通常为配置文件,所以将Mappers.xml ...

  6. linux下查看文件编码及修改编码介绍

    1.在Vim中可以直接查看文件编码:set fileencoding即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决用Vim查看文件乱码的问题,那么你可以在~/.vimrc 文件中添 ...

  7. [apue] linux 文件系统那些事儿

    前言 说到 linux 的文件系统,好多人第一印象是 ext2/ext3/ext4 等具体的文件系统,本文不涉及这些,因为研究具体的文件系统难免会陷入细节,甚至拉大段的源码做分析,反而不能从宏观的角度 ...

  8. Linux移植总结--Linux中asm和arch的软链接

    @ 目录 问题 include <asm/aaa.h>实际用的是asm-arm/aaa.h include <asm/arch/memory.h>实际用的是include/as ...

  9. activemq 使用经验

    activemq 使用经验   ActiveMQ 是apache的一个开源JMS服务器,不仅具备标准JMS的功能,还有很多额外的功能.公司里引入ActiveMQ后,ActiveMQ成里我们公司业 务系 ...

  10. Linux 性能调优都有哪几种方法？

    1.Disabling daemons (关闭 daemons).    2.Shutting down the GUI (关闭 GUI).    3.Changing kernel paramete ...