JSP 雙選單框選項雙向移動實作

功能需求

兩個 <select multiple> 選單框之間雙向移動選項，支援「新增」與「移除」操作。

頁面 HTML 結構

已選角色：<br />
<select multiple="multiple" name="roleIds" size="10" id="roleIds">
  <option value="1">主任</option>
  <option value="2">醫師</option>
  <option value="3">護士</option>
  <option value="4">前台</option>
  <option value="5">內勤</option>
</select>
<input type="button" value="<<-新增" onclick="moveOptions(document.getElementById('roleList'), document.getElementById('roleId'));" />
<input type="button" value="移除->>" class="btn1" onclick="moveOptions(document.getElementById('roleIds'), document.getElementById('roleList'));" />
<br/>
備選角色：<br />
<select multiple="multiple" size="10" id="roleList">
  <option value="6">工程師1</option>
  <option value="7">工程師2</option>
  <option value="8">工程師3</option>
  <option value="9">工程師4</option>
  <option value="10">工程師5</option>
  <option value="11">工程師6</option>
</select>

核心 JavaScript 實作

function moveOptions(oSource, oTarget) {
    while (oSource.selectedIndex > -1) {
        var opt = oSource.options[oSource.selectedIndex];
        oSource.removeChild(opt);
        
        var mark = true;
        for (var i = 0; i < oTarget.options.length; i++) {
            if (opt.value == oTarget.options[i].value) {
                mark = false;
                break;
            }
        }
        
        if (mark) {
            var newOpt = document.createElement("OPTION");
            oTarget.appendChild(newOpt);
            newOpt.value = opt.value;
            newOpt.text = opt.text;
            newOpt.selected = true;
        }
    }
}

關鍵邏輯解析

1. while (oSource.selectedIndex > -1)：持續處理所有被選取選項
2. removeChild：從來源移除
3. 重複值檢查：避免目標清單出現重複選項
4. createElement("OPTION")：建立新選項加入目標
5. 保留 selected = true：移動後保持選中狀態

擴展應用

• 表單提交時自動收集 roleIds 所有值
• 可搭配隱藏欄位同步儲存選項順序
• 適用於權限分配、群組管理、商品分類等情境