select multiple 动态实现

最新推荐文章于 2024-08-29 17:08:40 发布

最新推荐文章于 2024-08-29 17:08:40 发布 · 738 阅读

文章标签：

#Java #JavaScript #CSS #PHP #Perl #ViewUI

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文提供了一个使用JavaScript操作HTML页面中下拉选择框的示例，展示了如何通过按钮点击事件将已选项目从一个选择框移动到另一个选择框，并提供了查看所选项目的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<html>
	<head>
		<script language="JavaScript">
		<!--
			function moveOptions(objPush,objGet) {


				for (var i=0;i<objPush.length;i++) {
					if (objPush.options[i].selected) {
							var pushOpt = objPush.options[i];
							objGet.options.add(new Option(pushOpt.innerText, pushOpt.value));
							objPush.remove(i);

							i = i - 1;
					}
				}

			}

			function lookValue(objId) {
				var obj = document.getElementById(objId);
				for (var i=0;i<obj.length;i++) {
					if (obj.options[i].selected) {
							alert('value:'+obj.options[i].value);
							alert('description:'+obj.options[i].innerText);
					}
				}
			}

		//-->
		</script>
	</head>
	<body>
		<table>
				<tr>
					<td>
						<select multiple id="goObj" name="goObj" size="10">
							<option value="A">XHTML</option>
							<option value="B">CSS</option>
							<option value="C">JAVASCRIPT</option>
							<option value="D">XML</option>
							<option value="E">PHP</option>
							<option value="F">C#</option>
							<option value="G">JAVA</option>
							<option value="H">C++</option>
							<option value="I">PERL</option>
						</select>
					</td>
					<td>
						<input type="button" onclick="moveOptions(document.getElementById('goObj'),document.getElementById('backObj'))" value=">>"/>
						<input type="button" onclick="moveOptions(document.getElementById('backObj'),document.getElementById('goObj'))" value="<<"/>
					</td>
					<td>
						<select multiple id="backObj" name="backObj" size="10" >
						</select>
					</td>

				</tr>
				<tr>
					<td colspan="3">
						<input type="button" onclick="lookValue('goObj')" value="submit"/>
					</td>
				</tr>	
		</table>

	</body>
</html>