在项目中需要实现如下的效果内容。如图：
具体实现的源码如下：
两个框的页面源码：
已选角色：<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;
}
}
}
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！