具體實現的源碼如下：

兩個框的頁面源碼：

已選角色：<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('roleIds'));" />

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

實現的js代碼：

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;

}

}

if(mark){

var newOpt = document.createElement("OPTION");

oTarget.appendChild(newOpt);

newOpt.value = opt.value;

newOpt.text = opt.text;

newOpt.selected = true;

}

}

}

更多信息請查看IT技術專欄