JS控制下拉列表左右選擇實例代碼

-Advertisement-

按照國際慣例先放效果圖 <!DOCTYPE html> <html> <head> <title>JavaScript下拉列表左右選擇</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <scrip ...

按照國際慣例先放效果圖

<!DOCTYPE html>
<html>
 <head>
  <title>JavaScript下拉列表左右選擇</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" >
    function chooseToRight()
    {
      var op=document.getElementById("s1").getElementsByTagName("option");
      var select2=document.getElementById("s2");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        if(op[i].selected==true) 
        {
          select2.appendChild(op[i]);
          k--;i--;      //這裡要特別註意！！！因為appendChild相當於剪切，所以每次迴圈之後要執行k--,i--
        }
      }
    }
    function chooseToLeft()
    {
      var op=document.getElementById("s2").getElementsByTagName("option");
      var select2=document.getElementById("s1");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        if(op[i].selected==true) 
        {
          select2.appendChild(op[i]);
          k--;i--;
        }
      }
    }
    function allToLeft()
    {
      var op=document.getElementById("s2").getElementsByTagName("option");
      var select2=document.getElementById("s1");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        select2.appendChild(op[i]);
        k--;i--;
      }
    }
    function allToRight()
    {
      var op=document.getElementById("s1").getElementsByTagName("option");
      var select2=document.getElementById("s2");
      var k=op.length;
      for(var i=0;i<k;i++)
      {
        select2.appendChild(op[i]);
        k--;i--;
      }
    }
  </script>
 </head>
 <body>
 <div style="float: left">
   <select id="s1" multiple="multiple" style="width: 120px;height: 150px">
     <option>AAAAAAA</option>
     <option>BBBBBBB</option>
     <option>CCCCCCC</option>
     <option>DDDDDDD</option>
     <option>EEEEEEE</option>
   </select><br><br>
   <input type="button" value="選中添加到右邊" onclick="chooseToRight();"/><br><br>
   <input type="button" value="全部添加到右邊" onclick="allToRight();"/><br>
 </div>
 <div style="float: left">
   <select id="s2" multiple="multiple" style="width: 120px;height: 150px">
     <option>1111111</option>
     <option>2222222</option>
     <option>3333333</option>
     <option>4444444</option>
     <option>5555555</option>
   </select><br><br>
   <input type="button" value="選中添加到左邊" onclick="chooseToLeft();"/><br><br>
   <input type="button" value="全部添加到左邊" onclick="allToLeft();"/><br>
 </div>
 </body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

高效的Coding，前端開發人員值得一看的前端開發工具

摘要看著我稚嫩的代碼，今天我應該也可以過個快樂的兒童節吧，哈哈哈哈哈。既然是兒童節，那我就要給小伙伴們發發禮物，什麼禮物呢？那就是小編在使用的前端開發工具，保證你會有個難忘的兒童節。好，下麵就由我帶大家一一的看看禮物吧。工欲善其事必先利其器對於一個前端開發人員來說，擁有一款適合自己的“武器”是 ...
[05]HTML基礎之表格標簽

1. <table>標簽表格容器，儘量避免用屬性書寫樣式，而是用CSS來表達 border: 數字 //表格邊框寬度 2. <caption>標簽表格的標題，一般出現在表格上方，可通過CSS更改方向 3. <tr>標簽表示表格的一行。 4. <th>標簽表頭的一個單元，與<tr>相比，一般做 ...
[04]HTML基礎之塊級標簽

1. <p>標簽表示段落，多個空白符會合併成一個；<pre>標簽表示預文本段落，所有空白符都不合併。 //臨江仙詩句 <p>滾滾長江東逝水，浪花淘盡英雄，是非成敗轉頭空。青山依舊在，幾度夕陽紅。</p> <pre>白髮漁樵江渚上，慣看秋月春風，一壺濁酒喜相逢。古今多少事，都付笑談中。</pre ...
[03]HTML基礎之行內標簽

1.<ruby>標簽顯示東亞字元的發音(如中文，日文等)，與<rp>，<rt>標簽搭配。 //<ruby>為單個發音字元的容器，<rp>為不支持<ruby>標簽時顯示的內容， //<rt>為字元的發音 <ruby> 中 <rp>(</rp> <rt>zhong</rt> <rp>)</rp> 文 ...
[01]HTML基礎之簡單介紹

1.前言現如今科技進步，足不出戶盡曉天下事，一轉身便仿若隔世茫然。科技綻放時代，網路技術對人們的觸變無疑是深遠而重大的，隱於繽紛絢麗的網頁背後，是前端的蛻變更新。如今，隨意點開頁面，絢麗華彩的特效及流暢的用戶體驗，是以前始料未及的。從切圖到框架，從組件到模塊，從簡單到系統，前端漸成一方世界。 2 ...
uni-app之uni.showToast()image路徑問題

uni-app的API中，showToast的icon值只有success，loading，none三種顯示，失敗沒有圖標。如果失敗時需要顯示圖標，就要用到自定義圖標 image 了。 1 uni.showToast({ 2 title: '掃碼失敗', 3 image:'/static/lost. ...
js實現拖拽效果

<html> <head> <style> div { width: 100px; height: 100px; background: pink; position: relative; top: 10px; left: 10px; } </style> </head> <body> <div>m ...
JS數組轉字元串（3種方法）【轉】

JavaScript 允許數組與字元串之間相互轉換。其中 Array 方法對象定義了 3 個方法，可以把數組轉換為字元串，如表所示。數組方法說明 toString() 將數組轉換成一個字元串 toLocalString() 把數組轉換成本地約定的字元串 join() 將數組元素連接起來以構建一個 ...