使用js实现下拉框左移右移的功能

桃扇骨 2023-06-28 14:29 4阅读 0赞

主要涉及到的就是jquery中几个方法的使用:map(),each(),inArray().相关的使用方法可以参考文档使用  
直接上代码

$(function () { 
        //选中所有左边下拉框所有option右移
        $("#selectAll").click(function(){ 
            $(".AllRoles option").appendTo($(".selectRoles"));
        });
        //选中所有右边下拉框所有option右移
        $("#deselectAll").click(function(){ 
            $(".AllRoles").append($(".selectRoles option"));
        });
        $("#select").click(function(){ 
            //获取到左边所有选中的option
            $(".AllRoles option:selected").appendTo($(".selectRoles"));
        });
        $("#deselect").click(function(){ 
            //获取到左边所有选中的option
            $(".AllRoles").append($(".selectRoles option:selected"));
        });
    });
    //将存在于右边下拉框中的数据从左边删除
    $(function(){ 
        //获取到左边下拉框中所有的数据的id,存放在一个数组中
        var ids = $.map($(".selectRoles option"),function(option){ 
            return $(option).val();
        });
        //遍历左边的下拉框,对比每一个option是否存在于ids中,存在就删除
        $.each($(".AllRoles option"),function(index,option){ 
            console.log(option);
            if($.inArray($(option).val(),ids)>=0){ 
                $(option).remove();
            }
        });
    });
    //在提交表单的时候,选中所有左边下拉框中的option
    $(function(){ 
        $("#editForm").submit(function(){ 
            $(".selectRoles option").prop("selected",true);
        });
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关二进制字节码的左移、右移、逻辑右移运算

目录 1、机器码 2、<< 左移运算符 3、>> 右移运算符 4、>>> 无符号右移（逻辑右移）运算符 1、机器

╰+攻爆jí腚メ/ 2024年03月26日 20:47/ 0 赞/ 100 阅读

相关 java中左移＜＜、右移＞＞、无符号右移＞＞＞的区别

文章目录为什么没有无符号左移呢？位操作操作的是原码、反码还是补码？左移 << 右移 >> 无符号

爱被打了一巴掌/ 2024年03月23日 20:16/ 0 赞/ 43 阅读

相关使用js实现下拉框左移右移的功能

主要涉及到的就是jquery中几个方法的使用:map(),each(),inArray().相关的使用方法可以参考文档使用直接上代码 $(function ()

桃扇骨/ 2023年06月28日 14:29/ 0 赞/ 5 阅读

相关 c++左移右移的含义

数学意义：左移一位相当于乘2，左移n位相当于乘以2的n次方；右移一位相当于除2，右移n位相当于除以2的n次方。例如： 3 << 2，是将数字3左移2位，3的二进制

痛定思痛。/ 2022年12月03日 15:51/ 0 赞/ 214 阅读

相关位运算-左移、右移

1、位运算-左移、右移 -------------------- 1.1、左移"<<" 1.1.1、 int、long类型对于int类

刺骨的言语ヽ痛彻心扉/ 2022年10月23日 12:55/ 0 赞/ 221 阅读

相关 1：算数左移<<，2：算数右移>>，3：逻辑右移>>>

package com; / 1：算数左移<<，2：算数右移>>，3：逻辑右移>>> 算数左移:二

待我称王封你为后i/ 2022年08月25日 15:46/ 0 赞/ 199 阅读

相关 java位运算,左移,右移,无符号右移

java 位运算:左移<<,右移>>,无符号右移 >>> 1.左移 << 箭头向左,往高位移动左移运算符<<指指定的值的所有位有左移规定的次数 1)

﹏ヽ暗。殇╰゛Y/ 2022年05月28日 01:54/ 0 赞/ 344 阅读

相关左移和右移的作用

public class Test { public static void main(String[] args) {

向右看齐/ 2022年05月18日 10:20/ 0 赞/ 237 阅读

相关逻辑右移、算术左移、算术右移

逻辑右移(>>>)、算术左移(<<)、算术右移(>>) 参考：[https://www.cnblogs.com/yx729315991/p/6387711.html][ht

我不是女神ヾ/ 2022年03月06日 09:06/ 0 赞/ 296 阅读

相关左移和右移的相关问题

左移(< <)和右移（> >）的相关问题在实际开发中，遇到一个前端js的加密算法和java后端的加密算法一样，但是前端加密后的密文后端却解不开。于是跟进算法，终于找到源头。

川长思鸟来/ 2021年09月28日 22:02/ 0 赞/ 631 阅读