html中左右移动选择框,js实现两个select下拉框选项左移右移_咋地 _前端开发者

今天没事用

Javascript代码

/**选中的元素向右移动**/

function moveRight()

{

//得到第一个select对象

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

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

var len = optionElements.length;

if(!(selectElement.selectedIndex==-1)) //如果没有选择元素，那么selectedIndex就为-1

{

//得到第二个select对象

var selectElement2 = document.getElementById("secend");

// 向右移动

for(var i=0;i

{

selectElement2.appendChild(optionElements[selectElement.selectedIndex]);

}

} else

{

alert("您还没有选择需要移动的元素！");

}

}

//移动所有的到右边

function moveAll()

{

//得到第一个select对象

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

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

var len = optionElements.length;

//alert(len);

//将第一个selected中的数组翻转

var firstOption = new Array();

for(var k=len-1;k>=0;k--)

{

firstOption.push(optionElements[k]);

}

var lens = firstOption.length;

//得到第二个select对象

var selectElement2 = document.getElementById("secend");

for(var j=lens-1;j>=0;j--)

{

selectElement2.appendChild(firstOption[j]);

}

}

//移动选中的元素到左边

function moveLeft()

{

//首先得到第二个select对象

var selectElement = document.getElementById("secend");

var optionElement = selectElement.getElementsByTagName("option");

var len = optionElement.length;

//再次得到第一个元素

if(!(selectElement.selectedIndex==-1))

{

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

for(i=0;i

{

firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被选中的那个元素的索引

}

}else

{

alert("您还没有选中要移动的项目!");

}

}

//全部向左移

function moveAllLeft()

{

var selectElement = document.getElementById("secend");

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

var len = optionElements.length;

var optionEls = new Array();

for(var i=len-1;i>=0;i--)

{

optionEls.push(optionElements[i]);

}

var lens = optionEls.length;

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

for(var j=lens-1;j>=0;j--)

{

firstSelectElement.appendChild(optionEls[j]);

}

}

上面是javascript代码，下面是

<

源码下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。