js实现下拉选中option移动

来源：互联网发布：天刀公子羽数据编辑：程序博客网时间：2024/05/17 22:35

我只写了向右移动的js，向左移同理

<div>
   <center>
     <table >
        <tr>
            <td valign="middle">
               <select id="first" size="10" multiple="multiple">
                   <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 valign="middle">
               <input type="button" value="---->" id="add" style="vertical-align: top"/><br/>
               <input type="button" value="==>" id="add_all" style="vertical-align: top"/>
           </td>
           <td valign="middle">
               <select id="second" size="10" multiple="multiple">
                   <option value="选项9">选项9</option>
               </select>
       </td>
    </tr>
</table>
</center>
</div>
<script type="text/javascript">
   window.onload=function(){
       var firstSelect=document.getElementById("first");
       var secondSelect=document.getElementById("second");
       var firstOptions=firstSelect.getElementsByTagName("option");
       //将长度定义在外边，长度为固定值，否则，随着往右移动，长度变化而i在增加会出现bug
       var len=firstOptions.length;
/**********************************单个增加功能************************************/
       document.getElementById("add").onclick=function(){
           for(var i=0;i<len;i++){
               var firstOption=firstOptions[i];
               if(firstSelect.selectedIndex!=-1){
               secondSelect.appendChild(firstOptions[firstSelect.selectedIndex]);
               }
           }
       }
/**********************************************************************************/
/**********************************全部增加功能************************************/
       document.getElementById("add_all").onclick=function(){
           for(var i=0;i<len;i++){
               secondSelect.appendChild(firstOptions[0]);
           }
       }
/**********************************************************************************/
/**********************************双击增加功能************************************/
       firstSelect.ondblclick=function(){
           //this代表当前对象
           secondSelect.appendChild(this[this.selectedIndex]);
       }
/**********************************************************************************/
   }

用Jquery实现比较简单，首先引入文件；

单选实现：

$("#add").click(function(){

$("#second").append($("#first option:selected"));

});

全部实现：

$("#add_all").click(function(){

$("#second").append($("#first option"));

});

双击实现：

$("#first option:selected ").dblclick(function(){

$("#second").append($(this));

});

</script>

阅读全文

0 0