<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<select id="firstselect" size="10" multiple="multiple">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
<option>選項5</option>
<option>選項6</option>
<option>選項7</option>
<option>選項8</option>
</select>
<button id="add" name="add">add</button>
<button id="addall" name="addall">addall</button>
<select id="secondselect" size="10" multiple="multiple">
<option>選項9</option>
</select>
<script type="text/javascript">
//獲取按鈕 註冊事件
document.getElementById("add").onclick = function() {
//獲取左邊的select結點
var firstselect = document.getElementById("firstselect");
//獲取右邊的select結點
var secondselect = document.getElementById("secondselect");
//獲取firstselect中的option結點,並得到其長度
var optionElements = firstselect.getElementsByTagName("option");
var len = optionElements.length;
//獲取選中的option結點
//1.用select的 .selectedIndex屬性來獲取第一個被選中的索引
//測試是否可用 alert(firstselect.selectedIndex);
//2.移動，先將索引的第一個移過去,必須遍歷所有的結點，至少8次
for ( var i = 0; i < len; i++) {
if (firstselect.selectedIndex != -1) {
secondselect
.appendChild(optionElements[firstselect.selectedIndex]);
}
}
}
//addall按鈕方法一
/*
document.getElementById("addall").onclick = function() {
//獲取左邊的select結點
var firstselect = document.getElementById("firstselect");
//獲取右邊的select結點
var secondselect = document.getElementById("secondselect");
//獲取firstselect中的option結點,並得到其長度
var optionElements = firstselect.getElementsByTagName("option");
var len = optionElements.length;
while ( len!=0) {
var optionElement=optionElements[0];
secondselect.appendChild(optionElement);
}
}
*/
//addalla按鈕方法二
document.getElementById("addall").onclick = function() {
//獲取左邊的select結點
var firstselect = document.getElementById("firstselect");
//獲取右邊的select結點
var secondselect = document.getElementById("secondselect");
var len =firstselect.length;
for(var i=0;i<len;i++){
secondselect.appendChild(firstselect[0]);
}
}
//雙擊添加
document.getElementById("firstselect").ondblclick = function() {
alert("runned");
//獲取左邊的select結點
var firstselect = document.getElementById("firstselect");
//獲取右邊的select結點
var secondselect = document.getElementById("secondselect");
var optionElements=document.getElementsByTagName("option");
var len =optionElements.length;
for(var i=0;i<len;i++){
secondselect.appendChild(optionElements[firstselect.selectedIndex]);
}
}
</script>
</body>
</html>
