jsp中兩個(gè)框中內(nèi)容互換可以添加也可以移除
更新時(shí)間:2014年10月29日 17:05:49 投稿:whsnow
這篇文章主要介紹了jsp中兩個(gè)框中內(nèi)容互換的具體實(shí)現(xiàn),就是可以添加也可以移除,詳細(xì)代碼如下
在項(xiàng)目中需要實(shí)現(xiàn)如下的效果內(nèi)容。如圖:

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

