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 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:
|
<<: Using docker command does not require sudo
>>: HTML+VUE paging to achieve cool IoT large screen function
Recommend
Vue implements fuzzy query-Mysql database data
Table of contents 1. Demand 2. Implementation 3. ...
Docker Nginx container and Tomcat container to achieve load balancing and dynamic and static separation operations
Download Tomcat8 image [root@localhost ~]# docker...
The ultimate solution for playing background music in Firefox browser (Chrome multi-browser compatible)
The recommended code for playing background music ...
CSS to achieve zoom in and out close button (example code)
This effect is most common on our browser page. L...
FlashFXP ftp client software registration cracking method
The download address of FlashFXP is: https://www....
MySQL master-slave principle and configuration details
MySQL master-slave configuration and principle, f...
A brief discussion on the pitfalls of react useEffect closure
Problem code Look at a closure problem code cause...
Detailed explanation of how to build phalcon environment under nginx server on centos7 system
This article describes how to build a phalcon env...
Alibaba Cloud ESC Server Docker Deployment of Single Node Mysql
1. Download the accelerated version of msyql dock...
Analysis and solution of the reasons why MySQL scheduled tasks cannot be executed normally
Table of contents Preface Cause analysis and solu...
Understanding what Node.js is is so easy
Table of contents Official introduction to Node.j...
HTML fixed title column, title header table specific implementation code
Copy code The code is as follows: <!DOCTYPE ht...
A Deeper Look at the Differences Between Link and @import
There are three main ways to use CSS in a page: ad...
Detailed explanation of how Tomcat implements asynchronous Servlet
Preface Through my previous Tomcat series of arti...
Summary of 4 methods of div+css layout to achieve 2-end alignment of css
The div+css layout to achieve 2-end alignment is ...