Comment utiliser js pour contrôler la sélection gauche et droite d'une liste déroulante-js tutoriel-php.cn

Comment utiliser js pour contrôler la sélection gauche et droite d'une liste déroulante

王林

Libérer： 2020-05-06 09:16:35

avant

2021 Les gens l'ont consulté

Comment utiliser js pour contrôler la sélection gauche et droite d'une liste déroulante

需求分析

在我们的分类管理中，我们要能够去修改我们的分类信息，当我们点击修改的时候，可以跳转到一个能编辑的页面，这里面能够修改分类的名称、分类的描述、以及分类的商品。

技术分析

ondblclick="selectOne()"//双击事件
multiple="multiple"//select标签的属性

Copier après la connexion

代码实现：

<!DOCTYPE html><html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			步骤分析
				1. 确定事件: 点击事件 :onclick事件
				2. 事件要触发函数 selectOne
				3. selectOne要做一些操作
					(将左边选中的元素移动到右边的select中)
					1. 获取左边Select中被选中的元素
					2. 将选中的元素添加到右边的Select中就可以
		-->
		<script>
			
			function selectOne(){//				1. 获取左边Select中被选中的元素
				var leftSelect = document.getElementById("leftSelect");				var options = leftSelect.options;				
				//找到右侧的Select
				var rightSelect = document.getElementById("rightSelect");				//遍历找出被选中的option
				for(var i=0; i < options.length; i++){					var option1 = options[i];					if(option1.selected){		//				2. 将选中的元素添加到右边的Select中就可以
						rightSelect.appendChild(option1);
					}
				}
			}			
			//将左边所有的商品移动到右边
			function selectAll(){//				1. 获取左边Select中被选中的元素
				var leftSelect = document.getElementById("leftSelect");				var options = leftSelect.options;				
				//找到右侧的Select
				var rightSelect = document.getElementById("rightSelect");				//遍历找出被选中的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>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><input type="text" value="这里面都是手机数码"/></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<!--左边-->
					<div style="float: left;">
						已有商品<br />
						<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
							<option>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
						<a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
					</div>
					<!--右边-->
					<div style="float: right;"> 
						未有商品<br />
						<select multiple="multiple" id="rightSelect">
							<option>苹果6</option>
							<option>肾7</option>
							<option>诺基亚</option>
							<option>波导</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="提交"/>
				</td>
			</tr>
		</table>
	</body></html>

Copier après la connexion

推荐教程：js入门教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser js pour contrôler la sélection gauche et droite d'une liste déroulante