<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> select { width: 170px; height: 240px; font-size: 18px; background-color: pink; } </style> <script src="jquery-3.4.1.js"></script> <script> $(function () { // >>> 按钮 $('button').eq(0).click(function () { $('#dzm2').append($('#dzm1 option')) }) // <<< 按钮 $('button').eq(1).click(function () { $('#dzm1').append($('#dzm2 option')) }) // > 按钮 技术点：怎么获取被选中的子元素 $('button').eq(2).click(function () { $('#dzm2').append($('#dzm1 option:selected')) }) // < 按钮 技术点：怎么获取被选中的子元素 $('button').eq(3).click(function () { $('#dzm1').append($('#dzm2 option:selected')) }) }) </script> </head> <body> <select id="dzm1" size="10" multiple> <option value="">香蕉</option> <option value="">苹果</option> <option value="">鸭梨</option> <option value="">葡萄</option> </select> <button>>>></button> <button><<<</button> <button>></button> <button><</button> <select id="dzm2" size="10" multiple> </select> </body> </html>
- demo 效果：
