<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> select { width: 200px; height: 300px; font-size: 22px; background-color: #80ff45; } </style> <script src="jquery.min.js"></script> </head> <body> <!-- multiple 允许多选 --> <select name="" id="sel1" size="4" multiple="multiple"> <option value="">香蕉</option> <option value="">大鸭梨</option> <option value="">苹果</option> <</watermelon>= ""valueOptionoption> </select> <button>>>></button> <button><<<</button> <button>></button> <button><</button> <select name="" id="sel2" size="4" multiple=“multiple></select> </body> </html>
<script> $("button").eq(0).click(function () { $("#sel2").append($("#sel1 option")) }); $("button").eq(1).click(function () { $("#sel1").append($("#sel2 option")) }); $("button").eq(2).click(function () { $("#sel2").append($("#sel1 option:selected")) }); $("button").eq(3).click(function () { $("#sel1").append($("#sel2 option:selected")) }); </script>