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. laravel 框架 知识点

    get 方法返回一个包含 Illuminate\Support\Collection 实例的结果,其中每一条记录都是 PHP stdClass 对象的一个实例.你可以通过对象属性的方式来获取每个字段的 ...

  2. 题解 P1659 【[国家集训队]拉拉队排练】

    一眼可得PAM 如果没学过PAM的可以看这里:PAM学习小结 我们令PAM上多记录一个信息\(sum\),表示该节点表示串在原串上出现了多少次. 当我们处理完了\(sum\),对于长度\(len\)为 ...

  3. Python 递归函数返回值为 None 的解决办法

    在使用 Python 开发的过程中,避免不了会用到递归函数.但递归函数的返回值有时会出现意想不到的情况. 下面来举一个例子: >>> def fun(i): ... i += 1 . ...

  4. LGP4284题解

    这个题,题面是[],出题人也是个[] 真就只放前向星过,把 vector 和离线建图都卡了... 题意: 一棵树,一条边有 \(p_i\) 的概率连接两个节点,一个点有 \(P_i\) 的概率亮着,问 ...

  5. python学习之scipy实战1（积分用法）

    import numpy as np def main(): #1-- Integral积分 from scipy.integrate import quad, dblquad, nquad prin ...

  6. Apache BeanUtils与Spring BeanUtils性能比较

    在我们实际项目开发过程中,我们经常需要将不同的两个对象实例进行属性复制,从而基于源对象的属性信息进行后续操作,而不改变源对象的属性信息,比如DTO数据传输对象和数据对象DO,我们需要将DO对象进行属性 ...

  7. 前端知识之JavaScript知识

    前端之javaScript JavaScript html :展示文档内容的 css:控制文档的显示效果 js:控制文档的交互效果 是脚本语言 一种轻量级的编程语言 可插入html页面的编程代码 js ...

  8. Django中ORM对数据库的增删改查

    Django中ORM对数据库数据的增删改查 模板语言 {% for line in press %} {% line.name %} {% endfor %} {% if 条件 %}{% else % ...

  9. 解决使用DBeaver连接MySQL时报错-The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone.

    解决使用DBeaver连接MySQL时报错,其实提示很明显. The server time zone value '�й���׼ʱ��' is unrecognized or represents ...

  10. 网络爬虫笔记之http协议

    http协议和https协议: HTTP协议:HyperText Transfer Protocol,超文本传输协议,是一种发布和接收HTML页面的方法.服务器端口号是80. HTTPS协议:是HTT ...