说明

实现下面穿梭框功能

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>