JavaScript implements two select drop-down box options to move left and right-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JavaScript implements two select drop-down box options to move left and right

Mar 30, 2018 am 11:20 AM

javascript js select

This article introduces JavaScript code to implement two select drop-down box options to move left and right. Interested students can refer to this article

I have nothing to do today and I wrote a drop-down with two select using js. A small program that can move elements between boxes. I have just started learning JavaScript and there are still many areas for optimization.

Javascript code

The above is the javascript code, and the following is the html plus css code.

The code is as follows

/**Move the selected element to the right**/

functionmoveRight()

{

use using use using out out out ’s ’ ’s ’ through out ’s through out ‐ through out ‐ through ‐ ‐‐‐‐ and, to ");

varoptionElements = selectElement.getElementsByTagName("option");

varlen = optionElements.length;

if(!(selectElement.selectedIndex==-1)) //If no element is selected, then selectedIndex will be -1

SelectedIndex ‐‐‐1 select object

varselectElement2 = document.getElementById("secend");

// Move to the right

for(vari=0;i&lt ) # {

alert("You have not selected the element to move!");

}

/ /Move all to the right

functionmoveAll()

{

//Get the first select object

varselectElement = document.getElementById("first ");

varoptionElements = selectElement.getElementsByTagName("option");

varlen = optionElements.length;

//alert(len);

//Flip the array in the first selected

varfirstOption =newArray();

for(vark=len-1;k>=0;k -) ;

//Get the second select object

varselectElement2 = document.getElementById("secend");

for(varj=lens-1;j>=0 )

# //Move the selected element to the left

functionmoveLeft()

{

//First get the second select object

varselectElement = document.getElementById("secend");

varoptionElement = selectElement.getElementsByTagName("option");

varlen = optionElement.length;

// Get the first element again

if (!(selectElement.selectedIndex==-1))

varfirstSelectElement = document.getElementById("first");

for(i=0;i<len;i++)

{

firstSelectElement.appendChild(optionElement[selectElement. selectedIndex]);//The index of the selected element

}

}else

{

alert("You have not selected anything to move. s project!");

}

//Move all to the left

functionmoveAllLeft()

varselectElement = document.getElementById( "secend");

varoptionElements = document.getElementsByTagName("option");

varlen = optionElements.length;

varoptionEls =newArray();

for(vari=len-1;i>=0;i--)

{

optionEls.push(optionElements[i]);

}

varlens = optionEls.length;

varfirstSelectElement = document.getElementById("first");

for(varj=lens-1;j> =0;j--)

{

firstSelectElement.appendChild(optionEls[j]);

}

</script>

Html code

The code is as follows<html><head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>Untitled Document</title>

<styletype="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>

&lt ;body>

<pclass="select_move">

first"size="10"id="first"multiple="multiple">

"Toyota">Toyota</option>

< /option> # <pclass="select_move_2">

# & lt; inputtype = "Button" Value = "=== & GT;" OnClick = "Moveall ()" /& GT; & LT;

& LT; "value="<------"onclick="moveLeft()"/><br/>

"onclick="moveAllLeft()"/>

id="secend"multiple="multiple">

</body>

</html>

Related recommendations:

Sample code sharing using JavaScript to implement two select drop-down box options to move left and right

The above is the detailed content of JavaScript implements two select drop-down box options to move left and right. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn