HTML选项移动代码示例-优快云博客

本文链接：https://blog.youkuaiyun.com/Minimum_Time_Hour/article/details/75225729
这里写图片描述
选择移动框如上，代码如下(没有全部贴出)

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
        <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
        <select name="first" multiple="multiple" size=10 class="td3" id="first">
          <option value="选项1">选项1</option>
          <option value="选项2">选项2</option>
          <option value="选项3">选项3</option>
          <option value="选项4">选项4</option>
          <option value="选项5">选项5</option>
          <option value="选项6">选项6</option>
          <option value="选项7">选项7</option>
          <option value="选项8">选项8</option>
        </select>    
    </td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
       <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
        </td>
    <td width="127" align="left">
      <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
    </td>
  </tr>
</table>
</div>
</body>
<script type="text/javascript">
    document.getElementById("add").onclick = function(){
        var firstElement = document.getElementById("first");
        var optionElements = firstElement.getElementsByTagName("option");
        var secondElement = document.getElementById("second");

        var len = optionElements.length;
        for(var i=0 ; i < len; i++){
            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<len; i++){
            secondElement.appendChild(optionElements[0]);
        }
    }
    document.getElementById("remove_all").onclick = function(){
        var firstElement = document.getElementById("first");

        var secondElement = document.getElementById("second");
        var optionElements = secondElement.getElementsByTagName("option");
        var len = optionElements.length;
        for(var i=0; i<len; i++){
            firstElement.appendChild(optionElements[0]);
        }

    }
    document.getElementById("remove").onclick = function(){
        var firstElement = document.getElementById("first");

        var secondElement = document.getElementById("second");
        var optionElements = secondElement.getElementsByTagName("option");
        var len = optionElements.length;
        for(var i=0 ; i < len; i++){
            if(secondElement.selectedIndex != -1){
                firstElement.appendChild(optionElements[secondElement.selectedIndex]);
            }
        }
    }
</script>
</html>