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

最新推荐文章于 2024-07-12 22:54:26 发布

weixin_30549175

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量60

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/claricre/p/6061968.html

版权

<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>

转载于:https://www.cnblogs.com/claricre/p/6061968.html

weixin_30549175

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
例子：两个列表间的内容移动

<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}#rig...
复制链接

扫一扫