左右小移动 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小移动</title>
<script type="text/javascript">
    function fun1()
    {
        var arrform=document.getElementById("left");
        var arrto=document.getElementById("right");
        
        //对象的数据集
        arr=arrform.options;
        //向右侧增加选中的数据
        for(i=0;i<arr.length;i++)
        {
            //判断是否被选中
            if(arr[i].selected)
            {
                arrto.options.add(new Option(arr[i].text,arr[i].value));
            }
        }
        //删除选中的数据
        for(i=0;i<=arr.length-1;i++)
        {
            if(arr[i].selected)
            {
                //移除掉左侧的数据;参数是选项        
                arrform.remove(i);
            }
        }
    }
    
    function fun2()
    {
        var arrform=document.getElementById("left");
        var arrto=document.getElementById("right");
        
        //对象的数据集
        arr=arrto.options;
        //向右侧增加选中的数据
        for(i=0;i<arr.length;i++)
        {
            //判断是否被选中
            if(arr[i].selected)
            {
                arrform.options.add(new Option(arr[i].text,arr[i].value));
            }
        }
        //删除选中的数据
        for(i=0;i<=arr.length-1;i++)
        {
            if(arr[i].selected)
            {
                //移除掉左侧的数据;参数是选项        
                arrto.remove(i);
            }
        }
    }
</script>
<style type="text/css">
    select{ width:100px;}
</style>
</head>
<body>
    <table>
        <tr>
            <td>
                <select id="left" size="10">
                    <option>11</option> 
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option> 
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                       <option>19</option>
                </select>
            </td>
            <td>
                <input type="button" value=">>>" onclick="fun1()" /><br /><br />
                <input type="button" value="<<<" onclick="fun2()"/>
            </td>
            <td>
                <select id="right" size="10">
                    
                </select>
            </td>
        </tr>
    </table>    
   </body>
</html>

 

posted @ 2015-08-18 12:51  微软小菜鸟  阅读(268)  评论(0)    收藏  举报