jsp中兩個框中內容互換可以添加也可以移除
更新時間：2014年10月29日 17:05:49 投稿：whsnow
這篇文章主要介紹了jsp中兩個框中內容互換的具體實現，就是可以添加也可以移除，詳細代碼如下
在項目中需要實現如下的效果內容。如圖：
具體實現的源碼如下：
兩個框的頁面源碼：
已選角色：<br /> <select multiple="multiple" name="roleIds" size="10" id="roleIds">
<option value="1">
主任
</option>
<option value="2">
醫(yī)師
</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;
}
}
}
相關文章
JSP的9種基本內置組件...2006-10-10
這篇文章主要為大家詳細介紹了Jsp+Servlet實現文件上傳下載中的第一部分文件上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript 中的所有事物都是對象：字符串、數值、數組、函數...此外，JavaScript 允許自定義對象。希望本篇文章能給你帶來幫助2021-08-08
下面小編就為大家?guī)硪黄猨sp給后臺帶多個參數的方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了Jsp中如何讓圖片在div中居中的小技巧,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了jsp實現登錄界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
本文是JSP學習筆記系列的第一篇文章，跟之前一樣，我們先來看看jsp的基礎語法，有需要的小伙伴自己參考下。2015-09-09
這篇文章主要介紹了JSP 中Servlet的自己實現的相關資料,希望通過本文能幫助到大家，讓大家手動實現Servlet，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了jsp+mysql實現網頁的分頁查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
JSP+Servlet+JavaBean實現登錄網頁實例詳解
這篇文章主要介紹了JSP+Servlet+JavaBean實現登錄網頁的方法,以完整實例形式分析了JSP+Servlet+JavaBean實現登錄網頁所涉及的詳細步驟與具體實現方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10