基于javascript實現(xiàn)listbox左右移動
更新時間：2016年01月29日 09:26:59 作者：沸羊羊一個
這篇文章主要介紹了基于javascript實現(xiàn)listbox左右移動的相關(guān)資料，以一個完整的實例代碼分析了js實現(xiàn)listbox左右移動的相關(guān)技巧，感興趣的小伙伴們可以參考一下
本文實例講解了javascript實現(xiàn)listbox左右移動的詳細(xì)代碼，分享給大家供大家參考，具體內(nèi)容如下
效果圖：
具體代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>listbox左右移動</title>
</head>
<body>
<div style="background-color:#CCC; width:450px; height:300px; margin:150px,0,0,450px; border:1px solid">
<table align="center" width="285" height="169" bgcolor="#99CCFF">
<tr>
<td width="100">
<select name="first" id="first" size="10" multiple="multiple" style="background-color:#3FC;">
<option value="選項1">選項1</option>
<option value="選項2">選項2</option>
<option value="選項3">選項3</option>
<option value="選項4">選項4</option>
<option value="選項5">選項5</option>
<option value="選項6">選項6</option>
<option value="選項7">選項7</option>
<option value="選項8">選項8</option>
</select>
</td>
<td width="85" valign="middle">
<input name="add" id="add" type="button" value="--->"/>
<input name="add_all" id="add_all" type="button" value="===>"/>
<input name="remove" id="remove" type="button" value="<---"/>
<input name="remove_all" id="remove_all" type="button" value="<==="/>
</td>
<td width="100" align="left">
<select name="second" id="second" size="10" multiple="multiple" style="background-color:#3FC;">
<option value="選項9">選項9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//左移右
/*<input name="add" id="add" type="button" value="--->"/>*/
document.getElementById("add").onclick = function add()
{
var firstSel = document.getElementById("first");
var option = firstSel.getElementsByTagName("option");
//javascript的數(shù)組是動態(tài)數(shù)組，長度是可以變的。
//所以先取得下拉列表的長度，避免option被移走后長度變小，導(dǎo)致后面循環(huán)終止，出現(xiàn)beg
var oplength=option.length;
var secondSel = document.getElementById("second");
for(i=0;i<oplength;i++)
{
/*
selectedIndex: 該下標(biāo)返回下拉列表的索引值
注： 如果有多個被選中的情況下，永遠(yuǎn)返回第一個選中的索引值，索引最小的那個
如果沒有被選中的情況下，返回-1
selectedIndex是<select>的屬性
*/
if(firstSel.selectedIndex!=-1)
{
secondSel.appendChild(option[firstSel.selectedIndex]);
}
}
}
/*<input name="add_all" id="add_all" type="button" value="===>"/>*/
document.getElementById("add_all").onclick = function addAll()
{
var firstSel = document.getElementById("first");
var option = firstSel.getElementsByTagName("option");
//javascript的數(shù)組是動態(tài)數(shù)組，長度是可以變的。
//所以先取得下拉列表的長度，避免option被移走后長度變小，導(dǎo)致后面循環(huán)終止，出現(xiàn)beg
var oplength=option.length;
var secondSel = document.getElementById("second");
for(i=0;i<oplength;i++)
{
/*因為javascript的數(shù)組是動態(tài)數(shù)組，長度是可以變的。所以當(dāng)移走全部把數(shù)
組的值移走（一個一個的移走，數(shù)組長度馬上-1，所以數(shù)組下標(biāo)也是-1.因次我們要把每次移的是走下標(biāo)為0的那個
數(shù)，這樣才保證可以全部移走）*/
secondSel.appendChild(option[0]);
}
}
/*雙擊后把option移到右邊*/
document.getElementById("first").ondblclick = function dblclick()
{
/*方法一*/
/*
var firstSel = document.getElementById("first");
var option = firstSel.getElementsByTagName("option");
//javascript的數(shù)組是動態(tài)數(shù)組，長度是可以變的。
//所以先取得下拉列表的長度，避免option被移走后長度變小，導(dǎo)致后面循環(huán)終止，出現(xiàn)beg
var oplength=option.length;
var secondSel = document.getElementById("second");
for(i=0;i<oplength;i++)
{
//雙擊可以看成：第一次點擊選中，第二次點擊移動
secondSel.appendChild(option[firstSel.selectedIndex]);
}
*/
/*方法二*/
/*
this: this表示document.getElementById("first") 下拉列表
this.selectedIndex表示下拉列表選中的項
*/
var secondSel = document.getElementById("second");
secondSel.appendChild(this[this.selectedIndex]);
}
//右移左
/*<input name="remove" id="remove" type="button" value="<---"/>*/
document.getElementById("remove").onclick = function remove()
{
var secondSel = document.getElementById("second");
var firstSel = document.getElementById("first");
var option = secondSel.getElementsByTagName("option");
//javascript的數(shù)組是動態(tài)數(shù)組，長度是可以變的。
//所以先取得下拉列表的長度，避免option被移走后長度變小，導(dǎo)致后面循環(huán)終止，出現(xiàn)beg
var oplength=option.length;
for(i=0;i<oplength;i++)
{
/*
selectedIndex: 該下標(biāo)返回下拉列表的索引值
注： 如果有多個被選中的情況下，永遠(yuǎn)返回第一個選中的索引值，索引最小的那個
如果沒有被選中的情況下，返回-1
selectedIndex是<select>的屬性
*/
if(secondSel.selectedIndex!=-1)
{
firstSel.appendChild(option[secondSel.selectedIndex]);
}
}
}
/*<input name="remove_all" id="remove_all" type="button" value="<==="/>*/
document.getElementById("remove_all").onclick = function remove_all()
{
var secondSel = document.getElementById("second");
var firstSel = document.getElementById("first");
var option = secondSel.getElementsByTagName("option");
//javascript的數(shù)組是動態(tài)數(shù)組，長度是可以變的。
//所以先取得下拉列表的長度，避免option被移走后長度變小，導(dǎo)致后面循環(huán)終止，出現(xiàn)beg
var oplength=option.length;
for(i=0;i<oplength;i++)
{
/*因為javascript的數(shù)組是動態(tài)數(shù)組，長度是可以變的。所以當(dāng)移走全部把數(shù)
組的值移走（一個一個的移走，數(shù)組長度馬上-1，所以數(shù)組下標(biāo)也是-1.因次我們要把每次移的是走下標(biāo)為0的那個
數(shù)，這樣才保證可以全部移走）*/
firstSel.appendChild(option[0]);
}
}
/*雙擊后把option移到右邊*/
document.getElementById("second").ondblclick = function dblclick()
{
/*方法一*/
/*
var secondSel = document.getElementById("second");
var firstSel = document.getElementById("first");
var option = secondSel.getElementsByTagName("option");
//javascript的數(shù)組是動態(tài)數(shù)組，長度是可以變的。
//所以先取得下拉列表的長度，避免option被移走后長度變小，導(dǎo)致后面循環(huán)終止，出現(xiàn)beg
var oplength=option.length;
for(i=0;i<oplength;i++)
{
//雙擊可以看成：第一次點擊選中，第二次點擊移動
firstSel.appendChild(option[secondSel.selectedIndex]);
}
*/
/*方法二*/
/*
this: this表示document.getElementById("second") 下拉列表
this.selectedIndex表示下拉列表選中的項
*/
var firstSel = document.getElementById("first");
firstSel.appendChild(this[this.selectedIndex]);
}
</script>
</html>
代碼注釋很詳細(xì)，希望可以幫到大家。
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
這里給大家分享的是個人在最近看《JavaScript函數(shù)式編程》一書的第一章之后的一些感觸和理解，這里記錄下來，有需要的小伙伴可以參考下2015-08-08
JavaScript之iterable_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了JavaScript之iterable，遍歷Array可以采用下標(biāo)循環(huán)，遍歷Map和Set就無法使用下標(biāo)。為了統(tǒng)一集合類型，ES6標(biāo)準(zhǔn)引入了新的iterable類型，Array、Map和Set都屬于iterable類型2017-06-06
這篇文章主要介紹了JS中frameset框架彈出層實例代碼 的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)復(fù)選框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了EditPlus中的正則表達式 實戰(zhàn)(2)的相關(guān)資料,需要的朋友可以參考下2016-12-12
2008-01-01
下面小編就為大家分享一篇javascript 通過鍵名獲取鍵盤的keyCode方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
微信小程序中target和currentTarget的區(qū)別小結(jié)
這篇文章主要給大家介紹了關(guān)于微信小程序中target和currentTarget區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
js中top、clientTop、scrollTop、offsetTop的區(qū)別 文字詳細(xì)說明版
之前在修改IE6下的一個顯示bug時，查到過這些，貼這備忘，后面給出了詳細(xì)說明，以前的版本，沒仔細(xì)的說明，特希望大家也收藏下。2011-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)打卡簽到頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09