例子：两个列表间的内容移动 

<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:500px; height:500px}
#left{ width:200px; height:500px; float:left}
#zhong{ width:100px; height:500px; float:left}
#right{ width:200px; height:500px; float:left}
</style>
</head>

<body>
<br />
<div id="wai">
    <div id="left">
        <select style="width:200px; height:300px" id="selleft" multiple="multiple">
            <option value="山东">山东</option>
            <option value="淄博">淄博</option>
            <option value="张店">张店</option>
        </select>
    </div>
    <div id="zhong">
        <div style="margin-left:10px; margin-top:20px">
        <input style="width:60px; height:30px" type="button" value=">>" onclick="moveall()" />
        </div>
      
        <div style="margin-left:10px; margin-top:30px">
        <input style="width:60px; height:30px" type="button" value=">" onclick="moveone()" />
        </div>
    </div>
    <div id="right">
        <select id="selright" multiple="multiple" style="width:200px; height:300px"></select>
    </div>
</div>


<script type="text/javascript">

function moveone()
{
    var left = document.getElementById("selleft");
    var right = document.getElementById("selright");
    
    var xz = left.value;
    var str = "<option value='"+xz+"'>"+xz+"</option>";
    //判断
    //alert(right.childNodes.item(0));
    var bs = 0;
    for(var i=0;i<right.childNodes.length;i++)
    {
        if(right.childNodes.item(i).text==xz)
        {
            bs = 1;
        }
    }
    
    if(bs==0)
    {
        //追加
        right.innerHTML = right.innerHTML+str;
    }
}

function moveall()
{
    var left = document.getElementById("selleft");
    var right = document.getElementById("selright");
    
    right.innerHTML = left.innerHTML;
}

</script>

 

posted @ 2016-11-14 15:09  Claricre  阅读(234)  评论(0)    收藏  举报