JavaScript implements two select drop down box options to move left and right
- 2021-08-03 08:23:22
- OfStack
Today nothing with js wrote a small program with two select drop-down box can move elements between each other, just started to learn javascript there are many places to optimize.
Javascript code
<script type="text/javascript">
/** The selected element moves to the right **/
function moveRight()
{
// Get the first 1 A select Object
var selectElement = document.getElementById("first");
var optionElements = selectElement.getElementsByTagName("option");
var len = optionElements.length;
if(!(selectElement.selectedIndex==-1)) // If no element is selected, then selectedIndex Just for -1
{
// Get the first 2 A select Object
var selectElement2 = document.getElementById("secend");
// Move to the right
for(var i=0;i<len ;i++)
{
selectElement2.appendChild(optionElements[selectElement.selectedIndex]);
}
} else
{
alert(" You have not selected an element to move! ");
}
}
// Move everything to the right
function moveAll()
{
// Get the first 1 A select Object
var selectElement = document.getElementById("first");
var optionElements = selectElement.getElementsByTagName("option");
var len = optionElements.length;
//alert(len);
// Will be 1 A selected Array flip in
var firstOption = new Array();
for(var k=len-1;k>=0;k--)
{
firstOption.push(optionElements[k]);
}
var lens = firstOption.length;
// Get the first 2 A select Object
var selectElement2 = document.getElementById("secend");
for(var j=lens-1;j>=0;j--)
{
selectElement2.appendChild(firstOption[j]);
}
}
// Move the selected element to the left
function moveLeft()
{
// First get the first 2 A select Object
var selectElement = document.getElementById("secend");
var optionElement = selectElement.getElementsByTagName("option");
var len = optionElement.length;
// Get the first place again 1 Elements
if(!(selectElement.selectedIndex==-1))
{
var firstSelectElement = document.getElementById("first");
for(i=0;i<len;i++)
{
firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);// Index of the selected element
}
}else
{
alert(" You have not selected an item to move !");
}
}
// Move all to the left
function moveAllLeft()
{
var selectElement = document.getElementById("secend");
var optionElements = document.getElementsByTagName("option");
var len = optionElements.length;
var optionEls = new Array();
for(var i=len-1;i>=0;i--)
{
optionEls.push(optionElements[i]);
}
var lens = optionEls.length;
var firstSelectElement = document.getElementById("first");
for(var j=lens-1;j>=0;j--)
{
firstSelectElement.appendChild(optionEls[j]);
}
}
</script>
The above is javascript code, and the following is html plus css code.
Html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Untitled document </title>
<style type="text/css">
.select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;}
.select_move_1 { float:left;}
.select_move_2 { float:left;}
.select_move_3 { float:left;}
</style>
</head>
<body>
<div class="select_move">
<div class="select_move_1">
<select name="first" size="10" id="first" multiple="multiple">
<option value=" BMW "> BMW </option>
<option value=" Toyota "> Toyota </option>
<option value=" Audi "> Audi </option>
<option value=" Cadillac "> Cadillac </option>
<option value=" Modern "> Modern </option>
<option value=" Mercedes-Benz "> Mercedes-Benz </option>
<option value=" Ferrari "> Ferrari </option>
</select>
</div>
<div class="select_move_2">
<input type="button" value="------>" onclick="moveRight()"/><br />
<input type="button" value="===>" onclick="moveAll()" /><br />
<input type="button" value="<------" onclick="moveLeft()"/><br />
<input type="button" value="<===" onclick="moveAllLeft()"/>
</div>
<div class="select_move_3">
<select size="10" id="secend" multiple="multiple">
</select>
</div>
</div>
</body>
</html>
Source code download: js to achieve drop-down box elements move each other