Jquery实现多选下拉列表左右移动

本文实例为大家分享了Jquery实现多选下拉列表左右移动的具体代码，供大家参考，具体内容如下

jquery实现核心代码

//需求：实现下拉列表选择条目左右选择功能
        $(function () {
            //右移
            $("#toRight").click(function () {
                //获取右边的下拉列表对象，append(左边选中的对象)
                $("#rightName").append($("#leftName > option:selected"));
            });
            //左移
            $("#toLeft").click(function () {
                $("#leftName").append($("#rightName > option:selected"));
            });
 })
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script  src="../../js/jquery-3.3.1.min.js"></script>

        <style>
            #leftName , #btn,#rightName{
                float: left;
                width: 100px;
                height: 300px;
            }
            #toRight,#toLeft{
                margin-top:100px ;
                margin-left:30px;
                width: 50px;
            }

            .border{
                height: 500px;
                padding: 100px;
            }
        </style>

        <script>

            //需求：实现下拉列表选择条目左右选择功能
            $(function () {
                //右移
                $("#toRight").click(function () {
                    //获取右边的下拉列表对象，append(左边选中的对象)
                    $("#rightName").append($("#leftName > option:selected"));
                });
                //左移
                $("#toLeft").click(function () {
                    $("#leftName").append($("#rightName > option:selected"));
                });
            })

        </script>

    </head>
    <body>
        <div class="border">
            <select id="leftName" multiple="multiple">
                <option>张三</option>
                <option>李四</option>
                <option>王五</option>
                <option>赵六</option>
            </select>
            <div id="btn">
                <input type="button" id="toRight" value="-->"><br>
                <input type="button" id="toLeft" value="<--">

            </div>

            <select id="rightName" multiple="multiple">
                <option>钱七</option>
            </select>

        </div>

    </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery实现左右两个列表框的内容相互移动功能示例

    jQuery实现左右两个列表框的内容相互移动功能示例

    本文实例讲述了jQuery实现左右两个列表框的内容相互移动功能.分享给大家供大家参考,具体如下: 在jQuery中将左右两个列表框的内容相互移动,移动的同时进行删除,这里只是给大家写一个入门的小案例,今后写相同的功能思路也是一样的.仅供新手们的一个参考.希望能给那些跟我一样在菜鸟路上不断奋斗的人一些灵感,尽早入门. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title

  • jQuery slider Content(左右控制移动)

    不错的效果.好多文字广告可以这样控制. function animate(dir, step) { var position; position = parseInt($("#content").css("margin-left")); var contentwidth; var sliderwidth; contentwidth = parseInt($("#content").css("width")); sliderwi

  • jquery实现列表上下移动功能

    jquery实现列表上下移动功能

    废话少说,我们开始进入主题. 今天我们实现的是一个列表页面上移.下移功能.如图: 当勾选列表中的列时,点击上移或者下移,会动态上移或者下移. html代码如下: <div> <input type="button" onclick="up();" value=" 上移 "> <input type="button" onclick="down();" value="

  • jquery select多选框的左右移动 具体实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv=&quo

  • jQuery实现可移动选项的左右下拉列表示例

    jQuery实现可移动选项的左右下拉列表示例

    本文实例讲述了jQuery实现可移动选项的左右下拉列表.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">

  • jQuery实现下拉框左右移动（全部移动，已选移动）

    jQuery实现下拉框左右移动（全部移动，已选移动）

    用到的方法为:appendTo() 格式:$(content).appendTo(selector) appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容. click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数. 看一下具体实现的代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script

  • jQuery让控件左右移动的三种实现方法

    jQuery让控件左右移动的三种实现方法

    方法一 [注]需把控件的 CSS 的 position 属性设置为 relative 或 absolute. 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.8.0.js"></script> <script language="javascript"> $(document).ready(function(){ $("#right

  • 基于jquery实现左右上下移动效果

    基于jquery实现左右上下移动效果

    最近再做报表时候,直接把全部字段都导出了,但这不太灵活.回忆老师讲过的项目做报表如下左右上下移功能灵活控制,所以就尝试下咯. js代码 function selected(thiz) { var name = thiz.name; if(name=="right") $("select[name='left']").val(""); else $("select[name='right']").val(""

  • jquery移动点击的项目到列表最顶端的方法

    本文实例讲述了jquery移动点击的项目到列表最顶端的方法.分享给大家供大家参考.具体实现方法如下: <ul> <li>one</li> <li>two</li> <li>three</li> </ul> 如果点击two,则two这一行会移动到列表的最上方 $("li").click(function() { $(this).parent().prepend($(this)); }); 希望

  • jQuery实现用方向键控制层的上下左右移动

    jQuery实现用方向键控制层的上下左右移动

    题目:按下方向键时,使层向相应的方向平滑移动20像素:四个方向键的键码分别是37(左).38(上).39(右)和40(下). 然后我写了下面的代码: $div就是要移动的层,且它的position已在CSS中设为relative.瞄一眼好像没什么问题,运行之后发现下面的问题: 1.按了向下之后,再按向上没有反应. 2.按了向右之后,再按向左没有反应. 后来经一网友点拨,恍然大悟: 当按了向下的时候,top值为20px,这时候再按向上,从Firebug可以看出此时的bottom值也是20px,而层

随机推荐