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. 图解｜从根上彻底理解MySQL的索引

    这是图解MySQL的第4篇文章,这篇文章会让你 明白什么是索引,彻底理解B+树和索引的关系: 彻底理解主键索引.普通索引.联合索引: 了解什么是HASH索引,InnoDB和MyISAM索引的不同实现方 ...

  2. cobbler check执行报错

    httpd does not appear to be running and proxying cobbler, or SELinux is in the way. 当执行cobbler check ...

  3. gitee中项目到运行操作，包括：打包、热部署、数据库操作

    使用的工具:window10.IDEA 2018.2.3 .navicat110_premium.Git-2.23 1.idea导入gitee代码 复制项目地址 选择git工具 粘贴地址,点击clon ...

  4. OSPF协议原理及配置5-LSA分析

    OSPF协议原理及配置5-LSA分析   前面,已经介绍了邻接关系的建立和LSDB的同步.通过同步过程的介绍,我们可以了解LSDB的同步是通过交互LSA实现的. 不同角色的路由器发出的LSA的内容是不 ...

  5. VMware安装win7后，安装VMware Tools时报错安装程序无法继续。本程序需要您将此虚拟机上安装的操作系统更新到SP1

    具体报错: 倘若你用的是这样的镜像:cn_windows_7_enterprise_x64_dvd_x15-70741.iso 换镜像源.换镜像源.换镜像源! 换成带sp1的iso镜像:cn_wind ...

  6. (一)【转】asp.net mvc生成验证码

    网站添加验证码,主要为防止机器人程序批量注册,或对特定的注册用户用特定程序暴力破解方式,以进行不断的登录.灌水等危害网站的操作.验证码被广泛应用在注册.登录.留言等提交信息到服务器端处理的页面中.   ...

  7. CF487E Tourists(圆方树+树链剖分+multiset/可删堆)

    CF487E Tourists(圆方树+树链剖分+multiset/可删堆) Luogu 给出一个带点权的无向图,两种操作: 1.修改某点点权. 2.询问x到y之间简单路径能走过的点的最小点权. 题解 ...

  8. outlook配置osc地址（删除原账户重新配置）

    方法二:使用手动配置邮箱(适用于标准化未入域机器) Step1:在"开始"菜单找到 "控制面板"并打开(或按键盘上的"Win"+" ...

  9. Dubbo 配置文件是如何加载到 Spring 中的？

    Spring 容器在启动的时候,会读取到 Spring 默认的一些 schema 以及 Dubbo 自 定义的 schema,每个 schema 都会对应一个自己的 NamespaceHandler, ...

  10. 如何建立一个JDBC程序？

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...