web 多项选择框

最新推荐文章于 2024-01-28 20:23:56 发布

zhangbin131421

最新推荐文章于 2024-01-28 20:23:56 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： Web jQuery JavaScript XHTML CSS ViewUI

本文链接：https://blog.csdn.net/zhangbin131421/article/details/83533530

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

用 jquery 实现的一个多项选择框组件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>多项选择框</title>
		<style type="text/css">
			select {
				width: 200px; height: 200px; font-size: 16px
			}
		</style>
		<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
		<script type="text/javascript">
			function addIt() {
				$('#output').append($('#input option:selected'));
			}
			
			function deleteIt() {
				$('#input').append($('#output option:selected'));	
			}
			
			function saveIt() {
				alert($('#output').text());
			}
		</script>
	</head>
	<body>
		<table border="0" align="center" style="margin-top: 20px;">
			<tr>
				<th>可选列表</th>
				<th></th>
				<th>已选列表</th>
			</tr>
			<tr>
				<td align="right">
					<select name="input" size="10" multiple="multiple" id="input">
						<option>罗纳尔多,</option>
						<option>贝克汉姆,</option>
						<option>卡卡,</option>
						<option>梅西,</option>
						<option>罗纳尔迪尼奥,</option>
						<option>罗比尼奥,</option>
					</select>
				</td>
				<td align="center">
					<p><input type="button" name="Submit" value="添加" οnclick="addIt()" /></p>
					<p><input type="button" name="Submit2" value="删除" οnclick="deleteIt()" /></p>
				</td>
				<td>
					<select name="output" size="10" multiple="multiple" id="output"></select>
				</td>
			</tr>
			<tr>
				<th colspan="3">
					<input type="button" name="Submit" value="保存" οnclick="saveIt()" />
					<input type="button" name="Submit2" value="取消" οnclick="window.close()" />
				</th>
			</tr>
		</table>
	</body>
</html>

附件：运行效果图片

zhangbin131421

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web 多项选择框

用 jquery 实现的一个多项选择框组件 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1...
复制链接

扫一扫