jquery案例：穿梭框 作者：马育民 • 2022-09-09 07:57 • 阅读：10136 # 说明 实现下面穿梭框功能 [](/upload/0/0/1IX5puH85VzA.png) ### html ``` 计算机1班: <select id="class1" multiple> <option>李雷</option> <option>韩梅梅</option> <option>lucy</option> <option>lili</option> </select> <input type="button" value=">>转到2班" id="btn1"> <input type="button" value="转到1班<<" id="btn2"> 计算机2班: <select id="class2" multiple> <option>张三</option> <option>李四</option> <option>杨洋</option> <option>蔡徐坤</option> </select> ``` ### css ``` <style> select{ width: 80px; height: 120px; } </style> ``` ### JavaScript 引入js： ``` <script src="js/jquery-1.11.0.min.js"></script> ``` js代码： ``` <script> $("#btn1").click(function () { // 将 计算机1班选中的学生 找到 $op = $("#class1 option:selected") // 将这些学生添加计算机2班 $("#class2").append($op) }) $("#btn2").click(function () { $op = $("#class2 option:selected") $("#class1").prepend($op) }) </script> ``` 原文出处：/show_1IX40zLcV9dO.html