2. 技术
    3. JQuery——实现列表元素左右移动

    JQuery——实现列表元素左右移动

    技术2022-07-11  91

    页面显示 页面代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉列表左右移动</title> <script src="jquery-3.5.1.js"></script> <style> .select_body{ width: 500px; display: flex; flex-direction: row; align-items: center; } .btn{ display: flex; flex-direction: column; } input{ margin: 20px; } select{ width: 50px; height: 100px; margin: 30px; } </style> </head> <body> <div class="select_body"> <select id="left" multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> </select> <div class="btn"> <input type="button" value=">>>" id="toRight"> <input type="button" value="<<<" id="toLeft"> </div> <select id="right" multiple="multiple"> <option>A</option> <option>B</option> <option>C</option> </select> </div> </body> </html>

    将左侧选中项移到右侧 获取左侧列表选中内容

    $("#left > option:selected");

    使用appendTo()方法将左侧列表选中内容添加到右侧列表

    $("#left > option:selected").appendTo($("#right"));

    给toRight按钮绑定单击事件

    $("#toRight").click(function () { $("#left > option:selected").appendTo($("#right")); })

    将右侧选中项移到左侧 获取右侧列表选中内容

    $("#right > option:selected");

    使用appendTo()方法将右侧列表选中内容添加到左侧列表

    $("#right > option:selected").appendTo($("#left"));

    给toLeft按钮绑定单击事件

    $("#toLeft").click(function () { $("#right > option:selected").appendTo($("#left")); })

    实现效果 选中左侧内容 点击按钮移至右侧 选中右侧内容 点击按钮移至左侧 完整代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉列表左右移动</title> <script src="jquery-3.5.1.js"></script> <style> .select_body{ width: 500px; display: flex; flex-direction: row; align-items: center; } .btn{ display: flex; flex-direction: column; } input{ margin: 20px; } select{ width: 50px; height: 100px; margin: 30px; } </style> <script> $(function () { $("#toRight").click(function () { $("#left > option:selected").appendTo($("#right")); }) $("#toLeft").click(function () { $("#right > option:selected").appendTo($("#left")); }) }) </script> </head> <body> <div class="select_body"> <select id="left" multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> </select> <div class="btn"> <input type="button" value=">>>" id="toRight"> <input type="button" value="<<<" id="toLeft"> </div> <select id="right" multiple="multiple"> <option>A</option> <option>B</option> <option>C</option> </select> </div> </body> </html>
    Processed: 0.010, SQL: 9