js實現左右選擇框

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

這裡寫圖片描述

js實現左右選擇框

js實現左右選擇框

js 實現左右框資料選擇和搜尋

angular js 左右選擇框 Freemarker+js

js實現復選框的全選、全部選和反選

vue.js實現單選框、復選框和下拉框

使用ADMove.js實現移動廣告框

js 實現復選框全選全部選

js實現下拉框模糊查詢

js實現復選框全選和不選

js實現複選框的全選取消全選

js實現複選框的多選，全選，反選

js實現複選框全選/全不選/反選

原生js實現複選框全選全不選

利用js實現複選框的全選和反選

js實現input輸入框只能輸入數字的功能（完美測試通過）

純JS實現左右滑動佈局和滑動

js實現下拉框二級聯動

html頁面js實現頁面彈框

JS實現複選框的全選和全不選

js實現左右滑動的導航選單，仿今日頭條頂部選單

js實現左右選擇框

相關推薦