<form name="myForm">
<table>
<tr valign="top">
<td>
<select name="leftList" multiple size="6" style="width:50px;">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</td>
<td>
<!-- 通過事件onclick調用JavaScript的moveList函數 -->
<input type="button" name="to" value=" >> " onclick="moveList('leftList','rightList')"><p>
<input type="button" name="backTo" value=" << " onclick="moveList('rightList','leftList')"><p>
</td>
<td>
<select name="rightList" multiple size="6" style="width: 50px;">
<option>d</option>
<option>e</option>
<option>f</option>
</select>
</td>
</tr>
</table>
</form>
?
<script language="JavaScript">?
// moveList用于對兩個多選列表進行選項的移動操作
// from為"需要移動"的列表名稱,to為"移動到"列表名稱
function moveList(from,to) {?
var fromList = document.myForm.elements[from];
var fromLen = fromList.options.length;
var toList = document.myForm.elements[to];
var toLen = toList.options.length;
// current 為"需要移動"列表中的當前選項序號
var current = fromList.selectedIndex;
// 如果"需要移動"列表中有選擇項,則進行移動操作
while (current>-1) {
// o為"需要移動"列表中當前選擇項對象
var o = fromList.options[current];
var t = o.text;
var v = o.value;
// 根據已選項新建一個列表選項
var optionName = new Option(t, v, false, false);
// 將該選項添加到"移動到"列表中
toList.options[toLen]= optionName;
toLen++;
// 將該選項從"需要移動"列表中清除
fromList.options[current]=null;
current = fromList.selectedIndex;
}
}
</script>
?
?
程序說明:
//HTML?DOM?selectedIndex? 屬性
HTML?DOM?Select? 對象
定義和用法
selectedIndex? 屬性可設置或返回下拉列表中被選選項的索引號。
注釋:若允許多重選擇,則僅會返回第一個被選選項的索引號。
語法
selectObject.selectedIndex=number
?
HTML DOM options 集合
?
?
定義和用法
option 集合可返回包含 <select> 元素中所有 <option> 的一個數組。
注釋:數組中的每個元素對應一個 <option> 標簽 - 由 0 起始。
語法
selectObject.options[]
說明
options[] 集合并非一個普通的 HTMLcollection。為了和早期的瀏覽器向后兼容,這個集合有某種特殊的行為:允許通過 Select 對象來改變顯示的選項:
- 如果把 options.length 屬性設置為 0,Select 對象中所有選項都會被清除。
- 如果 options.length 屬性的值比當前值小,出現在數組尾部的元素就會被丟棄。
- 如果把 options[] 數組中的一個元素設置為 null,那么選項就會從 Select 對象中刪除。
- 可以通過構造函數 Option() 來創建一個新的 option 對象(需要設置 options.length 屬性)。
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
