<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <form action="#"> <h1>队伍配置</h1> <select id="seLeft" multiple size="7"> <option value="CD">成都</option> <option value="MY">绵阳</option> <option value="NC">南充</option> <option value="DZ">达州</option> <option value="PZH">攀枝花</option> </select> <button id="butLeft">>></button> <button id="butRight"><<</button> <select id="seRight" multiple size="7"> <option value="GY">广元</option> <option value="GH">广汉</option> <option value="GA">广安</option> <option value="LZ">泸州</option> <option value="ZY">资阳</option> </select> </form> <script > butLeft.addEventListener("click", function () { let optLeft = seLeft.childNodes; for (let item of optLeft) { if (item.selected == true) { seRight.appendChild(item); } } }); butRight.addEventListener("click", function () { let optRight = seRight.childNodes; for (let item of optRight) { if (item.selected == true) { seLeft.appendChild(item); } } }); let fromEle = document.querySelector("from"); fromEle.addEventListener("submit", function (e) { e.preventDefault(); }) </script> </body> </html>