具體實(shí)現(xiàn)的源碼如下：
兩個(gè)框的頁面源碼：
已選角色：<br /> <select multiple="multiple" name="roleIds" size="10" id="roleIds">
<option value="1">
主任
</option>
<option value="2">
醫(yī)師
</option><option value="3">
護(hù)士
</option><option value="4">
前臺(tái)
</option><option value="5">
內(nèi)勤
</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>
實(shí)現(xiàn)的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;
}
}
}