jQuery实现左移右移

最新推荐文章于 2024-08-27 16:05:08 发布

tianmaster

最新推荐文章于 2024-08-27 16:05:08 发布

阅读量860

点赞数

分类专栏：基础知识文章标签： jquery html

本文链接：https://blog.csdn.net/qq_44126024/article/details/113933081

版权

JavaScript jQuery DOM操作事件监听双向选择列表

关键词由CSDN通过智能技术生成

基础知识专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/* 右移 */
				$("#b1").click(function(){
					var left = $("#s1 option:selected").text()
					if(left != null){
						$("#s2").append("<option>" + left + "</option>")
						$("#s1 option:selected").remove()
					}
				})
				/* 左移 */
				$("#b2").click(function(){
					var right = $("#s2 option:selected").text()
					if(right != null){
						$("#s1").append("<option>" + right + "</option>")
						$("#s2 option:selected").remove()
					}
				})
			})
		</script>
		<style type="text/css">
			select{
				width: 40px;
			}
			#b1{
				position: fixed;
				top: 50px;
			}
			#b2{
				position: relative;
				top: -35px;
			}
		</style>
	</head>
	<body>
		<select id="s1" size="7">
			<option value="">1</option>
			<option value="">2</option>
			<option value="">3</option>
			<option value="">4</option>
			<option value="">5</option>
		</select>
		<input id="b1" type="button" value=">">
		<input id="b2" type="button" value="<">
		<select id="s2" size="7">
			<option value ="">8</option>
		</select>
	</body>
</html>