功能簡介：如下圖所示，將“已有商品”中的商品選中移動到右邊的“未有商品”，這裏可以選中單個選項移動，也可以實現一次性全部移動。同理，右邊中的“未有商品”的選項也可以選中然後移動到左邊的“已有商品”區域。
在很多示例中都實現了從左往右移的單一功能，這裏實現了雙向自由移動的功能。
剛開始寫雙向移動的時候，遇到了一些問題，就是從右向左移動時會出現左邊區域和右邊區域選項同時被選中的問題，這樣就只是兩個元素來回互換，並不能實現自由移動。
後來想到數據結構中的棧，可以利用“棧”中元素的特點，來解決這個問題。
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function selectOneLeftToRight()
{
//獲取左邊的元素和右側的元素
var selectLeft = document.getElementById("leftSelect");
var selectRight = document.getElementById("rightSelect");
var optionsLeft = selectLeft.options;
//遍歷找出被選中的元素
for(var i = 0; i < optionsLeft.length; i++)
{
if(optionsLeft[i].selected == true)
{
//將左邊選中的元素添加到右邊
selectRight.appendChild(optionsLeft[i]);
//下一步很重要！相當於每次都從剩餘的元素棧頂開始遍歷
i--;
}
}
}
function selectAllLeftToRight()
{
//All對應的代碼更簡單，就是把One的代碼拿來，然後少了selected判斷的條件
//因爲默認是全部都右移到右邊
var selectLeft = document.getElementById("leftSelect");
var selectRight = document.getElementById("rightSelect");
var optionsLeft = selectLeft.options;
for(var i = 0; i < optionsLeft.length; i++)
{
selectRight.appendChild(optionsLeft[i]);
//下一步很重要！相當於每次都從剩餘的元素棧頂開始遍歷
i--;
}
}
function selectOneRightToLeft()
{
var selectLeft = document.getElementById("leftSelect");
var selectRight = document.getElementById("rightSelect");
var optionsRight = selectRight.options;
for(var i = 0; i < optionsRight.length; i++)
{
if(optionsRight[i].selected == true)
{
selectLeft.appendChild(optionsRight[i]);
//下一步很重要！相當於每次都從剩餘的元素棧頂開始遍歷
i--;
}
}
}
function selectAllRightToLeft()
{
var selectLeft = document.getElementById("leftSelect");
var selectRight = document.getElementById("rightSelect");
var optionsRight = selectRight.options;
for(var i = 0; i < optionsRight.length; i++)
{
selectLeft.appendChild(optionsRight[i]);
//下一步很重要！相當於每次都從剩餘的元素棧頂開始遍歷
i--;
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分類名稱</td>
<td><input type="text" value="手機數碼"/></td>
</tr>
<tr>
<td>分類描述</td>
<td><input type="text" value="這裏面都是手機數碼"/></td>
</tr>
<tr>
<td>分類商品</td>
<td>
<!--左邊-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" "selectOneLeftToRight()">
<option>華爲</option>
<option>小米</option>
<option>錘子</option>
<option>oppo</option>
</select>
<br />
<a href="#" "selectOneLeftToRight()"> >> </a> <br />
<a href="#" "selectAllLeftToRight()"> >>> </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="#" "selectOneRightToLeft()"> << </a> <br />
<a href="#" "selectAllRightToLeft()"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
這裏解決的一個關鍵地方就是在for循環裏，使得i–再i++，這樣i保持不變，每一輪的遍歷都是從第一個元素開始（下標爲0），因此不會出現左邊和右邊的元素被同時選中的情況。結合“棧”的思想來想一下。