JS 实现下拉框去重
阅读原文时间:2023年07月08日阅读:1

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 实现下拉框去重,代码的简单实现了,仅供参考,欢迎讨论交流。

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器