ドロップダウンリスト選択ボックスを実装するJavaScript

この記事の例では、ドロップダウンリスト選択ボックスを実装するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

ページを作成する

** 2つのドロップダウン選択ボックス
- 属性を複数設定します - multiple = "multiple" (ドロップダウン選択ボックスに複数の行が表示されます)
** イベント付き4つのボタン

ヒント: Ctrl キーまたは Shift キーを押しながらクリックして、複数のオプションを選択します。

コードは次のとおりです。

<html>
 <ヘッド>
   
  <title>HTML の例</title>
  <スタイル タイプ = "text/css">
  div#左{
 フロート:左;
  }
 
  </スタイル>
 </head>
 <本文>
 <div id="左" ">
  <div> 要素
    <select id="select1" multiple="multiple" style="width:100px;height:1ss00px">
   <option>AAAAAA</option>
   <option>BBBBBB</option>
   <option>CCCCCC</option>
   <option>DDDDDD</option>
   <option>えーーーー</option>
    </select><br/>
    </div>
 
    <div>
    <input type="button" value="選択して右に追加" onclick="selToRight()"/><br/>
    <input type="button" value="すべてを右に追加" onclick="selAllRight()"/>
    </div>
   </div>
 
 <div id="right">
    <div> 要素
    <select id="select2" multiple="multiple" style="width:100px;height:1ss00p">
  <option>FFFFFF</option>
    </select><br/>
    </div>
 
    <div>
    <input type="button" value="選択して左に追加" onclick="selToLeft()"/><br/>
    <input type="button" value="すべてを左に追加" onclick="selAllLeft()"/>
    </div>
 </div>
 
 </本文>
 <script type="text/javascript">
//選択して左に追加 function selToLeft(){
 // 左側の選択オブジェクトを取得します var s1 = document.getElementById("select1");
  //右側の選択オブジェクトを取得します var s2 = document.getElementById("select2");
  //左側の選択オブジェクトの各オプションを取得します
  var ops = s2.getElementsByTagName("オプション");
  (var i4=0;i4<ops.length;i4++){
   op4 = ops[i4];
   op4.selected==trueの場合{
   s1.appendChild(op4);
   i4--;
   }
  }
}
 
 //すべてを左に追加します function selAllLeft(){
  // 左側の選択オブジェクトを取得します var s1 = document.getElementById("select1");
  //右側の選択オブジェクトを取得します var s2 = document.getElementById("select2");
  //左側の選択オブジェクトの各オプションを取得します
  var ops = s2.getElementsByTagName("オプション");
  (var i3=0;i3<ops.length;i3++){
   op3 = ops[i3];
   s1.appendChild(op3);
   i3--;
  }
 }
 //すべてを右に追加します function selAllRight(){
  // 左側の選択オブジェクトを取得します var s1 = document.getElementById("select1");
  //右側の選択オブジェクトを取得します var s2 = document.getElementById("select2");
  //左側の選択オブジェクトの各オプションを取得します
  var ops = s1.getElementsByTagName("オプション");
  (var i2=0;i2<ops.length;i2++){
   op2 = ops[i2];
   s2.appendChild(op2);
   i2--;
  }
 }
  // 選択して右に追加する function selToRight(){
  /*
   ステップ：
   1. 選択オプションを取得する
    -getElementByTagName() - 配列を返します - 配列を走査して各オプションを取得します
   2. オプションが選択されているかどうかを判断します - 属性 selected、選択されているかどうかを判断します - selected = true; selected - selected = false; unselected 3. 選択されている場合は、選択されたものを右側に追加します 4. select2 を取得します
   5. 選択した部分を追加する - appendChild() メソッド*/
  // 左側の選択オブジェクトを取得します var s1 = document.getElementById("select1");
  //右側の選択オブジェクトを取得します var s2 = document.getElementById("select2");
  //左側の選択オブジェクトの各オプションを取得します
  var ops = s1.getElementsByTagName("オプション");
  //ops配列を走査して各オプションの選択状態を取得します for(var i1=0;i1<ops.length;i1++){
   op1 = ops[i1];
   // 各オプションの選択された属性が選択されているかどうかを判定します if (op1.selected == true) {
    // 選択したら、右側の選択に追加します //- appendChild() メソッドを使用します s2.appendChild(op1);
    // 追加するたびに配列の長さが 1 つ減ります。i1++ の後は長さが異常になるため、--; を実行する必要があります。
    i1--;
   }
  }
 }
 
   </スクリプト>
 
</html>

効果画像: