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
Antdesign-vue combined with sortablejs to achieve the function of dragging and sorting two tables
Table of contents Achieve results Introduction to...
JS thoroughly understands GMT and UTC time zones
Table of contents Preface 1. GMT What is GMT Hist...
Example of how to build a Mysql cluster with docker
Docker basic instructions: Update Packages yum -y...
How to optimize MySQL indexes
1. How MySQL uses indexes Indexes are used to qui...
html+css+js to realize the function of photo preview and upload picture
Preface: When we are making web pages, we often n...
Example of using MySQL to count the number of different values in a column
Preface The requirement implemented in this artic...
Sample code for achieving small triangle border effect with pure CSS3+DIV
The specific code is as follows: The html code is...
Element sample code to implement dynamic table
Table of contents 【Code background】 【Code Impleme...
Detailed tutorial on using VMware WorkStation with Docker for Windows
Table of contents 1. Introduction 2. Install Dock...
Detailed explanation of the perfect integration solution between Serv-U FTP and AD
I logged into the backend to check the solution t...
Tutorial on how to modify the IP address of a Linux virtual machine, check the gateway, and configure the network environment
Modify the IP address of the virtual machine: Ent...
A brief analysis of Docker private image library and Alibaba Cloud object storage OSS
Docker private image library Docker private image...
Detailed usage of Vue more filter widget
This article example shares the implementation me...
Detailed tutorial on building a JMeter+Grafana+Influxdb monitoring platform with Docker
We all know that Jmeter provides native result vi...
Pure CSS code to achieve flow and dynamic line effects
Ideas: An outer box sets the background; an inner...