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

立即学习“Java免费学习笔记（深入）”；

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

  functionmoveRight()

  {

      //得到第一个select对象

    varselectElement = document.getElementById("first");

    varoptionElements = selectElement.getElementsByTagName("option");

    varlen = optionElements.length;

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

    {

      //得到第二个select对象

      varselectElement2 = document.getElementById("secend");

        // 向右移动

        for(vari=0;i

        {

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

        }

    }else

Petalica Paint

用AI为你的画自动上色！

下载

    {

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

    }

  }

  //移动所有的到右边

  functionmoveAll()

  {

    //得到第一个select对象

    varselectElement = document.getElementById("first");

    varoptionElements = selectElement.getElementsByTagName("option");

    varlen = optionElements.length;

    //alert(len);

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

    varfirstOption =newArray();

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

    {

      firstOption.push(optionElements[k]);

    }

    varlens = firstOption.length;

      //得到第二个select对象

    varselectElement2 = document.getElementById("secend");

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

    {

      selectElement2.appendChild(firstOption[j]);

    }

  }

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

  functionmoveLeft()

  {

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

    varselectElement = document.getElementById("secend");

    varoptionElement = selectElement.getElementsByTagName("option");

    varlen = optionElement.length;

    //再次得到第一个元素

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

    {

      varfirstSelectElement = document.getElementById("first");

      for(i=0;i

      {

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

      }

    }else

    {

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

    }

  }

  //全部向左移

  functionmoveAllLeft()

  {

    varselectElement = document.getElementById("secend");

    varoptionElements = document.getElementsByTagName("option");

    varlen = optionElements.length;

    varoptionEls =newArray();

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

    {

      optionEls.push(optionElements[i]);

    }

    varlens = optionEls.length;

    varfirstSelectElement = document.getElementById("first");

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

    {

      firstSelectElement.appendChild(optionEls[j]);

    }

  }

  .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;}

      宝马

      丰田

      奥迪

      凯迪拉克

      现代

      奔驰

      法拉利

        " onclick="moveRight()"/>

        " onclick="moveAll()" />