在项目中需要实现如下的效果内容。如图:
具体实现的源码如下:
两个框的页面源码:
已选角色:<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; } } }
如对本文有疑问, 点击进行留言回复!!
Springboot项目因为kackson版本问题启动报错解决方案
Java多线程下的其他组件之CyclicBarrier、Callable、Future和FutureTask详解
网友评论