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. Maven插件mybatis-generator，如何让生成的PO类的field上有对应表字段的注释

    前言 去年刚入职的时候,我就发现,po类(和数据库表对应的类)上,一片都是光秃秃的,什么注释都没有,类上没注释,field上也没注释. 在以前的项目中,其实我们都是有生成注释的,比如,对于下面这个表: ...

  2. swoole 聊天室

    1:宝塔终端安装php 2:宝塔终端检测是否安装好 php-v 3:宝塔面板安装swoole扩展,终端检测 php -m  查看扩展 扩展已经安装完毕

  3. 道路中心线提取、河道中心线的提取（ArcScan）

    道路中心线的提取,相信大家并不陌生. 道路中心线是道路路线几何设计中的重要特征线,也是道路交通管理中的重要控制线. 街区内的道路应考虑消防车道的通行,道路中心线间的距离不宜大于160米. 今儿个,博主 ...

  4. 在西电使用校内Linux 开源软件镜像

    西电开源社区(linux.xidian.edu.cn)为全校师生提供开源镜像服务,由于其使用校内服务器,因此产生的流量不会计入校园网 打开镜像列表:https://linux.xidian.edu.c ...

  5. ldap常用命令

    单独查询用户信息 ldapsearch -D "cn=admin,dc=hrbeu,dc=edu,dc=cn" -b "ou=hbr,dc=hrbeu,dc=edu,dc ...

  6. IDEA版部署离线ArcGIS api for JavaScript

    痛苦!折磨! 这两天发现IDEA 做ArcGIS api 开发比EClipse好用(重点是没有JS提示).但引入的ArcGIS api 一直报错,说找不到.这两天思来想去就是不知道为什么找不到loca ...

  7. 6月11日 python学习总结 框架理论

    Web框架本质及第一个Django实例   Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web ...

  8. 漫长的旅途--C++primer学习-命名空间以及类的自动转换和强制转换

    C++用名称空间来控制名称的作用域: 1不同命名空间的同名变量可以同时存在,不会发生冲突 2命名空间不能出现在代码块中 3我们用作用域运算符::,使用空间名来限定名称,最常用的std::cout 4u ...

  9. 前端工程化 Webpack基础

    前端工程化 模块化 (js模块化,css模块化,其他资源模块化) 组件化 (复用现有的UI结构.样式.行为) 规范化 (目录结构的划分.编码规范化.接口规范化.文档规范化.Git分支管理) 自动化 ( ...

  10. 面试问题之C++语言：volatile关键字的作用

    volatile的作用 volatile关键字是防止在共享的空间发生读取的错误.只保证其可见性,不保证原子性:使用volatile指每次从内存中读取数据,而不是从编译器优化后的缓存中读取数据,简单来讲 ...