<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
分類名稱
</td>
<td>
<input type="text" name="cname" value="手機數位" />
</td>
</tr>
<tr>
<td>
分類描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手機數位類商品</textarea>
</td>
</tr>
<tr>
<td>
分類商品
</td>
<td>
<span style="float: left;">
<font color="green" face="宋體">已有商品</font><br />
<select multiple="multiple" style="width: 100px;height: 200px;">
<option>IPhone6s</option>
<option>小米4</option>
<option>錘子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;">>></a></p>
<p><a href="#" style="padding-left: 20px;">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋體">未有商品</font><br />
<select multiple="multiple" style="width: 100px;height: 200px;">
<option>三星Note3</option>
<option>華為6s</option>
</select>
<p><a href="#"><<</a></p>
<p><a href="#"><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改" />
</td>
</tr>
</table>
<script>
let a = document.querySelectorAll('a')
let select1 = document.querySelectorAll('select')[0]
let select2 = document.querySelectorAll('select')[1]
// 定義空變量儲存兩個select的下标
let index1;
let index2;
// 已有商品
// 選擇option元素後點選删除
a[0].addEventListener('click', function () {
// 擷取選擇的元素的下标
index1 = select1.selectedIndex
// 往未有商品盒子裡追加元素
select2.appendChild(select1.children[index1])
// 删除選擇的元素
select1.children[index1].innerHTML.remove()
})
// 全部切換
a[1].addEventListener('click', function () {
// 往未有商品盒子裡添加已有商品的元素
select2.innerHTML += select1.innerHTML;
// 清空已有商品盒子
select1.innerHTML = ''
})
// 未有商品
// 選擇option元素後點選删除
a[2].addEventListener('click', function () {
// 擷取選擇的元素的下标
index2 = select2.selectedIndex
// 往已有商品盒子裡追加元素
select1.appendChild(select2.children[index2])
// 删除選擇的元素
select2.children[index2].innerHTML.remove()
})
// 全部切換
a[3].addEventListener('click', function () {
// 往已有商品盒子裡添加未有商品的元素
select1.innerHTML += select2.innerHTML;
// 清空已有商品盒子
select2.innerHTML = ''
})
</script>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)