您的位置：首页 > 其它

DOM练习3-选项批量移动

2013-05-04 20:24 162 查看

1、html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>optionMove.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript"  src="js/optionRomove.js"></script>
</head>

<body>
<div>
<select style="width:60px" multiple size="10" id="leftID">
<option>选项A</option>
<option>选项B</option>
<option>选项C</option>
<option>选项D</option>
<option>选项E</option>
<option>选项F</option>
<option>选项G</option>
<option>选项H</option>
<option>选项I</option>
<option>选项J</option>
</select>
</div>
<div style="position:absolute;left:220px;top:20px">
<select multiple size="10" style="width:60px" id="rightID">
</select>
</div>

<div style="position:absolute;left:100px;top:40px">
<input type="button" value="批量右移" id="rightMoveID"/>
</div>
<div style="position:absolute;left:100px;top:70px">
<input type="button" value="全部右移" id="rightMoveAllID"/>
</div>
<div style="position:absolute;left:100px;top:100px">
<input type="button" value="批量左移" id="leftMoveID"/>
</div>
<div style="position:absolute;left:100px;top:130px">
<input type="button" value="全部左移" id="leftMoveAllID"/>
</div>
<div style="position:absolute;left:100px;top:160px">
<input type="button" value="左边颠例" id="leftReverseAllID"/>
</div>
</body>
</html>

2、JS

//          1、双击右移
document.getElementById("leftID").ondblclick = function(){
//            获取选中的对象
var optionElement = this[this.selectedIndex];//被选中的位置,this代表select标签,this.selectedIndex代表选中的索引号，0开始
//            将该对象移动到右边
document.getElementById("rightID").appendChild(optionElement);
};
//        2、双击左移
document.getElementById("rightID").ondblclick = function(){
//        获取选中的对象
var optionElement = this[this.selectedIndex];
//        将对象移动到左边
document.getElementById("leftID").appendChild(optionElement);
};
//        3、批量右移
document.getElementById("rightMoveID").onclick = function(){
var selectElement = document.getElementById("leftID");//定位左边select对象
var optionSelectArray = selectElement.options;//取得option对象组成的集合
var size = optionSelectArray.length;
for (var i=0 ; i<size ; i++) { //如果这里的size写成optionSelectArray.length,选中10个，只有5个会右移过去，
var optionElement =  selectElement[selectElement.selectedIndex];//获取到选中的option对象
document.getElementById("rightID").appendChild(optionElement);
/*    一写就会使CPU使用率无限上升
if(selectElement[i].selected == true)
document.getElementById("rightID").appendChild(selectElement[i]);
i--;
*/
};
};
//        4、批量左移
document.getElementById("leftMoveID").onclick = function(){
var rightSelectElement = document.getElementById("rightID");//右边的select对象
var rightOptionArray = rightSelectElement.options;//右边的option对象
var size = rightOptionArray.length;
for (var i=0; i<size; i++) {
var optionSelectedElement = rightSelectElement[rightSelectElement.selectedIndex];
document.getElementById("leftID").appendChild(optionSelectedElement);
};
};
//        5、全部右移
document.getElementById("rightMoveAllID").onclick = function(){
var leftSelectElement = document.getElementById("leftID");
var  leftOptionArray =  leftSelectElement.options;
var size = leftOptionArray.length;
for (var i=0; i<size; i++) {
document.getElementById("rightID").appendChild(leftOptionArray[0]);
};
};
//        6、全部左移
document.getElementById("leftMoveAllID").onclick = function(){
var rightSelectElement = document.getElementById("rightID");
var rightOptionArray = rightSelectElement.options;
var size = rightOptionArray.length;
for (var i=0; i<size; i++) {
document.getElementById("leftID").appendChild(rightOptionArray[0]);//这里写成i，firefox和chrome都没问题，但ie只能移动一半
};
};
//        7、左边颠倒
/*document.getElementById("leftReverseAllID").onclick = function(){
alert("左边颠倒");
var leftSelectElement = document.getElementById("leftID");
var  leftOptionArray =  leftSelectElement.options;
var size = leftOptionArray.length;
for(var i=0;i<size;i++){
//                var temp = leftOptionArray[i];
leftOptionArray[i] = leftOptionArrays[size-i-1];
//                 leftOptionArrays[size-i-1] = temp;
}
}*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航