<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>