学习笔记之下拉列表单、多选转移

多项下拉列表之转移。

style：

<style type="text/css">
    *{ margin:0px auto; padding:0px;}
    #w1{
        width:700px;
        height:300px;}
    #a1{width:300px;
        height:300px;
        float:left;
        }
    #zhong{width:100px;
        height:300px;
        float:left;}    
    #a2{width:50px;
        height:30px;
        margin-left:25px;
        margin-top:60px;
        }
    #a3{width:50px;
        height:30px;
        margin-left:25px;
        margin-top:60px;}
    #a4{width:300px;
        height:300px;
        float:left;}

</style>

body：

<body>
    <div id="w1">   <!--用外面的div套起所有的就可以让他们在中间而不是靠左-->
    <div>
        <select id="a1" multiple="multiple">
            <option value="优秀">优秀</option>
            <option value="良好">良好</option>
            <option value="不错">不错</option>
            <option value="继续努力">继续努力</option>
        </select>
    </div>
    <div id="zhong">
        <input type="button" value=">>" id="a2" onclick="All()">
        <input type="button" value=">" id="a3" onclick="One()">
    </div>
    <div>
        <select id="a4" multiple="multiple">
            
        </select>
    </div>
    </div>

</body>

script：

function One()
    {
        var e=0;
        var a11=document.getElementById("a1");//获取左边列表id
        var a44=document.getElementById("a4");//获取右边列表id
        var a111=a11.value;  //现在只是获取了左边的值，还没法让左边的值在右边没有下拉项的情况下出现，所
                            //以应当弄出下拉项拼接上值。又由于我们想接上的是值，所以要先定义一下
        var b111="<option value='"+a111+"'>"+a111+"</option>";
        // a44.innerHTML=a44.innerHTML+b111;
        
        for(var i=0;i<=a44.length;i++)//必须写<=  因为开始时a44的长度为0
        {
            if(e==a44.length) //右 长度
            {
             //  右  内容         右 内容    拼接好的左内容
                a44.innerHTML=a44.innerHTML+b111;
                break;
            }
                  //左 值  右 位置  值
            else if(a111==a44[i].value)
            {
                break;
            }
            e++;//必须放在if判断外面 for循环里面
            //放到if里不会随着for循环次数的增加而增加
        }
    }
    function All()
    {
        var a11=document.getElementById("a1");
        var a44=document.getElementById("a4");
        a44.innerHTML=a11.innerHTML;
        
        }

 

posted @ 2017-10-27 19:18  子言小竹  阅读(200)  评论(0)  编辑  收藏  举报