js实现左右选择框

最新推荐文章于 2024-05-22 11:09:24 发布

sjl6666666666

最新推荐文章于 2024-05-22 11:09:24 发布

阅读量2.9k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/sjl6666666666/article/details/53318966

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
//选择
function a(){

    //var option1=document.getElementsByName("option1");
    var selected1=document.getElementById("selected1");
    var option1=selected1.getElementsByTagName("option");
    var selected2=document.getElementById("selected2");

    for(var i=0;i<option1.length;i++){
        if(option1[i].selected==true){
            selected2.appendChild(option1[i]);
            i--;
        }
    }
}
//全部选择
function b(){
    var selected1=document.getElementById("selected1");
    var option1=selected1.getElementsByTagName("option");
    var selected2=document.getElementById("selected2");

    for(var i=0;i<option1.length;i++){

            selected2.appendChild(option1[i]);
            i--;

    }

}
//删除
function c(){
    var selected2=document.getElementById("selected2");
    var option2=selected2.getElementsByTagName("option");
    var selected1=document.getElementById("selected1");

    for(var i=0;i<option2.length;i++){
        if(option2[i].selected==true){
            selected1.appendChild(option2[i]);
            i--;
        }
    }
}
//全部删除
function d(){
    var selected2=document.getElementById("selected2");
    var option2=selected2.getElementsByTagName("option");
    var selected1=document.getElementById("selected1");

    for(var i=0;i<option2.length;i++){

            selected1.appendChild(option2[i]);
            i--;

    }

}
</script>
<style type="text/css">
div {
        width: 200px;
        height:150px; /* 要想让div显示出来必须为其指定高度和宽度 */
        border: 2px solid blue; 
        float: left;
        text-align: center;
    }
  input{
    width: 100px;
    height:30px;
    margin: 3px;

  }
   select {
    width: 200px;
    height:150px;
    text-align: center;
   }
   #div2{
        width: 150px;
        height:150px;
   }
   .fontClass{
   font-size: 30px;
   }
</style>
</head>
<body>
<div id="div1" >
<select multiple="multiple" id="selected1" class="fontClass" >
<option name="option1">aaa</option>
<option name="option1">bbb</option>
<option name="option1">ccc</option>
</select>
</div>
<div id="div2">
<input type="button" value="选择" onclick="a()"><br>
<input type="button" value="全部选择" onclick="b()"><br>
<input type="button" value="删除" onclick="c()"><br>
<input type="button" value="全部删除" onclick="d()"></div> 
<div id="div3">
<select multiple="multiple" id="selected2" class="fontClass"></select>
</div> 
可以根据喜欢自己加css样式

这里写图片描述

sjl6666666666

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现左右选择框

<script type="text/javascript">//选择function a(){ //var option1=document.getElementsByName("option1"); var selected1=document.getElementById("selected1"); var option1=selected1.getElementsB
复制链接

扫一扫