JavaScript实现两个select下拉框选项左移右移

前端之家收集整理的这篇文章主要介绍了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<len ;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<len;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代码

无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档