1.下載jQuery，並導入：https://blog.csdn.net/weixin_44718300/article/details/88746796
2.代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步驟:
1. 導入JQ的文件
2. 文檔加載函數 :頁面初始化
3.確定事件 : 點擊事件 onclick
4. 事件觸發函數
1. 移動被選中的那一項到右邊
-->
<script type="text/javascript" src="../js/jquery-3.3.1.js.css" ></script>
<script>
$(function(){
$("#a1").click(function(){
//找到被選中的那一項
//將被選中項添加到右邊
$("#rightSelect").append($("#leftSelect option:selected"));
});
//將左邊所有商品移動到右邊
$("#a2").click(function(){
$("#rightSelect").append($("#leftSelect option"));
});
});
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分類商品</td>
<td>
<!--左邊-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect">
<option>華為</option>
<option>小米</option>
<option>錘子</option>
<option>oppo</option>
</select>
<br />
<a href="#" id="a1" > >> </a> <br />
<a href="#" id="a2"> >>> </a>
</div>
<!--右邊-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>蘋果6</option>
<option>腎7</option>
<option>諾基亞</option>
<option>波導</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
</table>
</body>
</html>