jsp中兩個(gè)框中內(nèi)容互換可以添加也可以移除
在項(xiàng)目中需要實(shí)現(xiàn)如下的效果內(nèi)容。如圖:
具體實(shí)現(xiàn)的源碼如下:
兩個(gè)框的頁(yè)面源碼:
已選角色:<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; } } }
相關(guān)文章
eclipse配置tomcat開(kāi)發(fā)Dynamic Web Project環(huán)境圖解
這篇文章主要介紹了基于Eclipse進(jìn)行Dynamic Web Project項(xiàng)目開(kāi)發(fā)環(huán)境的整合,大家參考使用吧2013-12-12tomcat共享多個(gè)web應(yīng)用會(huì)話的實(shí)現(xiàn)方法
這篇文章主要介紹了tomcat共享多個(gè)web應(yīng)用會(huì)話的實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文能幫助到大家,讓大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10JSP開(kāi)發(fā)入門(二)----JSP語(yǔ)法的基本原理
JSP開(kāi)發(fā)入門(二)----JSP語(yǔ)法的基本原理...2006-10-10JSP動(dòng)態(tài)生成驗(yàn)證碼存儲(chǔ)在session作用范圍內(nèi)
下面的代碼實(shí)現(xiàn)的功能:寫一個(gè)JSP頁(yè),動(dòng)態(tài)生成一個(gè)驗(yàn)證碼,存儲(chǔ)在session作用范圍內(nèi),并以圖像形式返回給客戶端顯示2014-09-09Servlet網(wǎng)上售票問(wèn)題引發(fā)線程安全問(wèn)題的思考
這篇文章主要是關(guān)于Servlet模擬網(wǎng)上售票問(wèn)題,引發(fā)的線程安全問(wèn)題的思考,感興趣的小伙伴們可以參考一下2015-12-12