代码改变世界

列表项转移

2017-10-27 08:32  澄序源  阅读(113)  评论(0)  编辑  收藏  举报 
<!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>123</title>
        <style type="text/css">
            *{
                margin:0px auto;
                padding:0px;
                }
            /*#date{
                width:200px;
                height:20px;
                }*/
                
            #wai{
                width:500px;
                height:500px;
                }
            #zuo{
                float:left;
                width:200px;
                height:500px;
                }
            #zhong{
                float:left;
                width:100px;
                height:500px;
                }
            #you{
                float:left;
                width:200px;
                height:500px;
                }
        </style>
    </head>
    
    <body>
        <div id="wai">
            <div id="zuo">
                <select multiple="multiple" id="znr" style="width:200px; height:200px;">
                    <option value="山东">山东</option>
                    <option value="淄博">淄博</option>
                    <option value="张店">张店</option>
                </select>
            </div>
            <div id="zhong">
                <div style="margin-left:25px; margin-top:20px;">
                    <input type="button" value=">>" style="width:50px;" onclick="Moveall()" />
                </div>
                
                <div style="margin-left:25px; margin-top:20px;">
                    <input type="button" value=">" style="width:50px;" onclick="Moveone()"/>
                </div>
            </div>
            <div id="you">
                <select id="ynr" multiple="multiple" style="width:200px; height:200px;">
                    
                    
                </select>
            </div>
        </div>
        
    </body>
    
</html>

<script type="text/javascript">
        
        function Moveone()
        {
            
            var left = document.getElementById("znr");//获取左边列表的所有值
            var right = document.getElementById("ynr");//获取右边列表的所有值
            var lz = left.value;//点击选中的值付给lz
            
            var str;//声明变量
            str="<option value='"+lz+"'>"+lz+"</option>";//拼接字符串付给str
                
            var bs = 0;//声明变量bs
            for(var i=0;i<=right.length;i++)//循环条件为i<右边select里所有值得长度(有几个option长度就位几)
            {    
                if(bs==right.length)//在bs=右边长度前不会走本条
                {
                    right.innerHTML = right.innerHTML+str;
                    break;//添加一遍后跳出;
                }
                else if(right[i].value==lz)//右边所有值和点击的值对比
                {
                    break;//有同样的跳出
                }
                
                bs++;//for循环一遍bs+1;
            }
        }
        
        function Moveall()
        {
            var left = document.getElementById("znr");
            var right = document.getElementById("ynr");
            
            right.innerHTML = left.innerHTML;    
        }
    </script>