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è)框的頁(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)文章
JSP的9種基本內(nèi)置組件...2006-10-10
Jsp+Servlet實(shí)現(xiàn)文件上傳下載 文件上傳（一）
這篇文章主要為大家詳細(xì)介紹了Jsp+Servlet實(shí)現(xiàn)文件上傳下載中的第一部分文件上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript 中的所有事物都是對(duì)象：字符串、數(shù)值、數(shù)組、函數(shù)...此外，JavaScript 允許自定義對(duì)象。希望本篇文章能給你帶來(lái)幫助2021-08-08
下面小編就為大家?guī)?lái)一篇jsp給后臺(tái)帶多個(gè)參數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要介紹了Jsp中如何讓圖片在div中居中的小技巧,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了jsp實(shí)現(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JSP學(xué)習(xí)筆記之基礎(chǔ)語(yǔ)法
本文是JSP學(xué)習(xí)筆記系列的第一篇文章，跟之前一樣，我們先來(lái)看看jsp的基礎(chǔ)語(yǔ)法，有需要的小伙伴自己參考下。2015-09-09
這篇文章主要介紹了JSP 中Servlet的自己實(shí)現(xiàn)的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家手動(dòng)實(shí)現(xiàn)Servlet，需要的朋友可以參考下2017-10-10
jsp+mysql實(shí)現(xiàn)網(wǎng)頁(yè)的分頁(yè)查詢
這篇文章主要為大家詳細(xì)介紹了jsp+mysql實(shí)現(xiàn)網(wǎng)頁(yè)的分頁(yè)查詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JSP+Servlet+JavaBean實(shí)現(xiàn)登錄網(wǎng)頁(yè)實(shí)例詳解
這篇文章主要介紹了JSP+Servlet+JavaBean實(shí)現(xiàn)登錄網(wǎng)頁(yè)的方法,以完整實(shí)例形式分析了JSP+Servlet+JavaBean實(shí)現(xiàn)登錄網(wǎng)頁(yè)所涉及的詳細(xì)步驟與具體實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10