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. c++11 实现枚举值到枚举名的转换

    效果 ``` ENUM_DEFINE ( Color, Red, Blue, ) EnumHelper(Color::Red) -> "Red" EnumHelper(Col ...

  2. JavaScript面向对象—继承的实现

    JavaScript面向对象-继承的实现 前言 面向对象的三大特性:封装.继承和多态.上一篇我们简单的了解了封装的过程,也就是把对象的属性和方法封装到一个函数中,这一篇讲一下JavaScript中继承 ...

  3. mysql常用索引

    1.索引 在关系数据库中,索引是一种单独的.物理的对数据库表中一列或多列的值进行排序的一种存储结构,它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单.索引的作用相当 ...

  4. ESXI 虚拟化误删除管理端口Management Network (vmk0)，导致无法访问后台解决方案

    按F2开启控制台shell,启用后返回.按Alt+F1打开终端. 输入 esxcfg-vmknic -a -i 192.168.1.10 -n 255.255.255.0 "Manageme ...

  5. 01 简介 如何高效的学习Java

    JavaSE 千寻简学习笔记 简介 TIOBE:编程语言排行榜 官网:https://hellogithub.com/report/tiobe/ 如何高效的学习Java 多写(代码)多写(笔记)多写( ...

  6. 前端性能优化 —— 使用 BMP 图片代替 canvas.toDataURL

    前端开发中有时需要将 canvas 的内容导出成图片文件,例如供 CSS 使用,通常会使用 canvas.toDataURL,兼容性好并且简单. 不过 canvas.toDataURL 显然是非常低效 ...

  7. linux下hadoop2.6.1源码64位的编译

    linux下hadoop2.6.1源码64位的编译 一. 前言 Apache官网上提供的hadoop本地库是32位的,如果我们的Linux服务器是64位的话,就会现问题.我们在64位服务器执行Hado ...

  8. Java基础——方法的调用

    Java基础--方法的调用     总结: 1. 在同一个类中-- 对于静态方法,其他的静态和非静态方法都可以直接通过"方法名"或者"类名.方法名"调用它. 对 ...

  9. 利用DNSLog实现无回显注入

    测试一些网站的时候,一些注入都是无回显的,我们可以写脚本来进行盲注,但有些网站会ban掉我们的ip,这样我们可以通过设置ip代理池解决, 但是盲注往往效率很低,所以产生了DNSlog注入 DNSLOG ...

  10. ctf之Flask_fileUpload

    启动环境,显示如图: 直接f12产看源码信息: 大致意思是:使用python编写文件然后以图片格式上传系统会以ipython格式解析,就可获取flag. 编写python代码: import os o ...