Use JavaScript to complete the control drop-down list and select left and right

Use JS to control the left and right selection of the drop-down list

requirement analysis

In our classification management, we need to be able to modify our classification information. When we make a little modification, we need to jump to an editable page, where we can modify the classification name, classification description, and classification goods

technical analysis

ondblclick="selectOne()": double click event
select the attribute of the tag multiple="multiple":

code implementation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			//Step analysis
				1. Identify events: Click event :onclick Event
				2. Event to trigger function selectOne
				3. selectOne Do something
					(Move the selected element on the left to the one on the right select in)
					1. Get left Select Selected elements in
					2. Add the selected element to the Select Middle is fine
		-->
		<script>
			
			function selectOne(){
//				1. get the selected elements in the Select on the left
				var leftSelect = document.getElementById("leftSelect");
				var options = leftSelect.options;
				
				//Find Select on the right
				var rightSelect = document.getElementById("rightSelect");
				//Traverse to find the selected option
				for(var i=0; i < options.length; i++){
					var option1 = options[i];
					if(option1.selected){
		//				2. Add the selected element to Select on the right
						rightSelect.appendChild(option1);
					}
				}
			}
			
			//Move all items on the left to the right
			function selectAll(){
//				1. Get the selected element in the left Select
				var leftSelect = document.getElementById("leftSelect");
				var options = leftSelect.options;
				
				//Find Select on the right
				var rightSelect = document.getElementById("rightSelect");
				//Traverse to find the selected option
				for(var i=options.length - 1; i >=0; i--){
					var option1 = options[i];
					rightSelect.appendChild(option1);
				}
			}
			
			
			
		</script>
	</head>
	<body>
		
		<table border="1px" width="400px">
			<tr>
				<td>Classification name</td>
				<td><input type="text" value="Mobile digital"/></td>
			</tr>
			<tr>
				<td>Classification description</td>
				<td><input type="text" value="It's all mobile digital"/></td>
			</tr>
			<tr>
				<td>Classified Goods</td>
				<td>
					<!--left-->
					<div style="float: left;">
						//Existing products < br / >
						<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
							<option>HUAWEI</option>
							<option>millet</option>
							<option>Hammer</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
						<a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
					</div>
					<!--Right-->
					<div style="float: right;"> 
						//No goods < br / >
						<select multiple="multiple" id="rightSelect">
							<option>Apple 6</option>
							<option>Kidney 7</option>
							<option>NOKIA</option>
							<option>Waveguide</option>
						</select>
						<br />
						<a href="#"> &lt;&lt; </a> <br />
						<a href="#"> &lt;&lt;&lt; </a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="Submission"/>
				</td>
			</tr>
		</table>
	</body>
</html>

‚Äč

Tags: Javascript Mobile Attribute

Posted on Wed, 06 May 2020 11:07:20 -0400 by Jamz