基于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)文章
這篇文章主要介紹了es6和commonJs的區(qū)別,ES6的模塊化規(guī)范更加先進、靈活，能夠適應(yīng)更多的應(yīng)用場景，而CommonJS則更加簡單、易用，廣泛應(yīng)用于Node.js開發(fā)中，在實際應(yīng)用中，可以根據(jù)具體情況選擇使用不同的模塊化方案，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了JavaScript enum枚舉類型定義及使用方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
本文詳細(xì)介紹了js時間控件只顯示年月的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
超鏈接怎么正確調(diào)用javascript函數(shù)
本文介紹使用超鏈接調(diào)用javasript函數(shù)且不會影響GIF圖片動畫的方法，有遇到相同問題的小伙伴可以參考一下。
2016-05-05 
這篇文章主要為大家詳細(xì)介紹了Bootstrap3多級下拉菜單的相關(guān)資料，需引用bootstrap.min.css和bootstrap.min.css.js，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02 
這篇文章主要介紹了 Scala解析Json字符串的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下
2017-10-10 
js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別?
這篇文章主要介紹了js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別,需要的朋友可以參考下
2015-11-11 
IE7已經(jīng)支持position:fixed了，而我們的IE6呢？還繼續(xù)使用js事件？消耗資源，破壞結(jié)構(gòu)，畫面閃耀。
2011-03-03 
這篇文章主要介紹了基于JavaScript實現(xiàn)的插入排序算法,結(jié)合實例形式詳細(xì)分析了插入排序的原理、操作步驟及javascript相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下
2017-04-04