Transfer of drop-down list items in the front end (implemented by a function parameter passing)

Posted by jamesbrauman on Thu, 02 Jan 2020 01:20:41 +0100

Today brings the transfer of drop-down list items implemented by js. There are two special points to note. One is the transfer of parameters when calling a function in a button, and the other is whether the name of the form object can be passed as a parameter.

First of all, I will give the code: (directly copying can test the effect)

<!DOCTYPE html>

		<meta charset="UTF-8">
		<title>Text transfer of drop-down box</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			.wide {
				width: 400px;
				margin: 0 auto;
			.selcetwords {
				width: 100px;
		<script type="text/javascript">
			function moveWords(oldwords,newwords) {
				var words = new Array();//Array to hold words
				//value used to get the selected word
				var temp = 0;//Used to save the number of selected words
				//Save selected words
				for(var i = 0; i < document.getElementById(oldwords).options.length; i++) {
					//Judge whether to select
					if (document.getElementById(oldwords).options[i].selected) {
						//Save selected words
						words[temp] = document.getElementById(oldwords).options[i].value;
						//Increase the length of the word to save
						temp ++;
				//Delete words that have been selected for saving
				for (var i = 0;i < words.length;i++) {
					for(var j = 0; j < document.getElementById(oldwords).options.length; j++){
						if (words[i] == document.getElementById(oldwords).options[j].value) {
				//Assign to destination list
				for (var i = 0;i < words.length;i++) {
					newOption = new Option(words[i],words[i]);
					//Add list item

		<div class="wide">
			<form action="#" method="post" name="myform">
				<select size="10" name="leftwords" id="leftwords" class="selcetwords" multiple="multiple">
					<option value="aaa">aaa</option>
					<option value="bbb">bbb</option>
					<option value="ccc">ccc</option>
					<option value="ddd">ddd</option>
				<input type="button" name="" id="" value="Right shift" onclick="moveWords('leftwords','rightwords')"/>
				<input type="button" name="" id="" value="Left shift" onclick="moveWords('rightwords','leftwords')"/>
				<select size="10" name="rightwords" id="rightwords" class="selcetwords" multiple="multiple">
					<option value="xxx">xxx</option>
					<option value="yyy">yyy</option>
					<option value="zzz">zzz</option>


Let me answer the following two questions:

The first one: you can use single quotes for your own named parameters. Otherwise, it will be treated as an unnamed variable, and it is not allowed to add double quotes

Second: in the form button, the parameters passed by the function should be the parameters and values of the form. Of course, it's OK to pass name, which is equivalent to passing custom parameters, but now it's generally using id. when using id, it's OK to use it without double quotes.

Topics: Javascript