点击框左移 html,JavaScript实现两个select下拉框选项左移右移

今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。

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代码，下面是html加css代码。

Html代码

无标题文档

.select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;}

.select_move_1 { float:left;}

.select_move_2 { float:left;}

.select_move_3 { float:left;}

宝马

丰田

奥迪

凯迪拉克

现代

奔驰

法拉利

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