JavaScript to implement drop-down list selection box

This article example shares the specific code of JavaScript to implement the drop-down list selection box for your reference. The specific content is as follows

Create a page

** Two drop-down selection boxes
- Set the attribute multiple attribute - multiple = "multiple" (the drop-down selection box displays multiple lines)
** Four buttons with events

Tip: Select multiple options by holding down ctrl or shift and clicking on them.

The code is as follows:

<html>
 <head>
   
  <title>HTML Example</title>
  <style type = "text/css">
  div#left{
 float:left;
  }
 
  </style>
 </head>
 <body>
 <div id="left" ">
  <div >
    <select id="select1" multiple="multiple" style="width:100px;height:1ss00px">
   <option>AAAAAA</option>
   <option>BBBBBB</option>
   <option>CCCCCC</option>
   <option>DDDDDD</option>
   <option>EEEEEE</option>
    </select><br/>
    </div>
 
    <div>
    <input type="button" value="Select and add to the right" onclick="selToRight()"/><br/>
    <input type="button" value="Add all to the right" 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="Select and add to the left" onclick="selToLeft()"/><br/>
    <input type="button" value="Add all to the left" onclick="selAllLeft()"/>
    </div>
 </div>
 
 </body>
 <script type="text/javascript">
//Select and add to the left function selToLeft(){
 //Get the select object on the left var s1 = document.getElementById("select1");
  //Get the select object on the right var s2 = document.getElementById("select2");
  //Get each option in the select object on the left
  var ops = s2.getElementsByTagName("option");
  for(var i4=0;i4<ops.length;i4++){
   op4=ops[i4];
   if(op4.selected==true){
   s1.appendChild(op4);
   i4--;
   }
  }
}
 
 //Add all to the left function selAllLeft(){
  //Get the select object on the left var s1 = document.getElementById("select1");
  //Get the select object on the right var s2 = document.getElementById("select2");
  //Get each option in the select object on the left
  var ops = s2.getElementsByTagName("option");
  for(var i3=0;i3<ops.length;i3++){
   op3=ops[i3];
   s1.appendChild(op3);
   i3--;
  }
 }
 //Add all to the right function selAllRight(){
  //Get the select object on the left var s1 = document.getElementById("select1");
  //Get the select object on the right var s2 = document.getElementById("select2");
  //Get each option in the select object on the left
  var ops = s1.getElementsByTagName("option");
  for(var i2=0;i2<ops.length;i2++){
   op2=ops[i2];
   s2.appendChild(op2);
   i2--;
  }
 }
  //Select and add to the right function selToRight(){
  /*
   step:
   1. Get the option in the select
    -getElementByTagName() - returns an array - traverses the array and gets each option
   2. Determine whether option is selected - attribute selected, determine whether it is selected - selected = true; selected - selected = false; unselected 3. If selected, add the selected one to the right 4. Get select2
   5. Add the selected part - appendChild() method*/
  //Get the select object on the left var s1 = document.getElementById("select1");
  //Get the select object on the right var s2 = document.getElementById("select2");
  //Get each option in the select object on the left
  var ops = s1.getElementsByTagName("option");
  //Traverse the ops array to get the selected state of each option for(var i1=0;i1<ops.length;i1++){
   op1 = ops[i1];
   // Determine whether the selected attribute in each option is selected if (op1.selected == true) {
    //If selected, add to the select on the right //-Use appendChild() method s2.appendChild(op1);
    //Each addition will reduce the length of the array by one. After i1++, the length becomes abnormal, so we need to --;
    i1--;
   }
  }
 }
 
   </script>
 
</html>

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

An example of elegant writing of judgment in JavaScript
56 practical JavaScript tool functions to help you improve development efficiency
JavaScript implements draggable modal box
JavaScript to achieve simple provincial and municipal linkage
js tag syntax usage details

<<: Using docker command does not require sudo

>>: HTML+VUE paging to achieve cool IoT large screen function