HTML5如何将列表向左右移,分类列表左移右移操作

js操作列表左右移动，代码如下：

分类列表左移右移操作

选项1 选项2 选项3 选项4 选项5 选项6 选项7 选项8

选项9

//

document.getElementById("add").onclick = function(){

/*

*

选项1

选项2

选项3

选项4

选项5

选项6

选项7

选项8

*/

var firstElement = document.getElementById("first");

var optionElements = firstElement.getElementsByTagName("option");

var len = optionElements.length;

var secondElement = document.getElementById("second");

//for(var i=0;i

//var optionElement = optionElements[i];

//

//if(optionElement.getAttribute("selected")){

//secondElement.appendChild(optionElement);

//}

//}

for(var i=0;i

/*

* selectedIndex属性

* * 如果没有被选中的时候，selectedIndex的值是"-1"

* * 如果有一个呗选中的时候，selectedIndex的值就是那个被选中的选项的索引值

* * 如果有多个被选中的时候，selectedIndex的值只能找到第一个被选中的索引值

*/

//alert(firstElement.selectedIndex);

if(firstElement.selectedIndex!=-1){

secondElement.appendChild(optionElements[firstElement.selectedIndex]);

}

}

}

//

document.getElementById("add_all").onclick = function(){

var firstElement = document.getElementById("first");

var optionElements = firstElement.getElementsByTagName("option");

var len = optionElements.length;

var secondElement = document.getElementById("second");

for(var i=0;i

secondElement.appendChild(optionElements[0]);

}

}

//

document.getElementById("remove").onclick = function(){

var secondElement = document.getElementById("second");

var optionElements = secondElement.getElementsByTagName("option");

var len = optionElements.length;

var firstElement = document.getElementById("first");

for(var i=0;i

if(secondElement.selectedIndex!=-1){

firstElement.appendChild(optionElements[secondElement.selectedIndex]);

}

}

}

//

document.getElementById("remove_all").onclick = function(){

var secondElement = document.getElementById("second");

var optionElements = secondElement.getElementsByTagName("option");

var len = optionElements.length;

var firstElement = document.getElementById("first");

for(var i=0;i

firstElement.appendChild(optionElements[0]);

}

}

//双击 从左到右

/*

*

选项1

选项2

选项3

选项4

选项5

选项6

选项7

选项8

*/

document.getElementById("first").ondblclick = function(){

var firstElement = document.getElementById("first");

var optionElements = firstElement.getElementsByTagName("option");

var len = optionElements.length;

var secondElement = document.getElementById("second");

for(var i=0;i

if(firstElement.selectedIndex!=-1){

secondElement.appendChild(optionElements[firstElement.selectedIndex]);

}

}

}

document.getElementById("second").ondblclick = function(){

var secondElement = document.getElementById("second");

var optionElements = secondElement.getElementsByTagName("option");

var len = optionElements.length;

var firstElement = document.getElementById("first");

for(var i=0;i

if(secondElement.selectedIndex!=-1){

firstElement.appendChild(optionElements[secondElement.selectedIndex]);

}

}

}