jQuery之下拉框左右选择

最新推荐文章于 2021-08-04 01:31:23 发布

编程之上

最新推荐文章于 2021-08-04 01:31:23 发布

阅读量781

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/ruizhengyun/article/details/45063139

jquery 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的可交互下拉框组件。该组件允许用户通过点击按钮将选项从一个下拉框移动到另一个下拉框，支持单个选项及全部选项的移动，并实现了双击选项进行移动的功能。

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery之下拉框左右选择</title>
	<style>
	*{margin:0; padding: 0}
	body{ text-align: center;}
	.wrapper{ width: 1000px; text-align: left; margin:50px auto;}
	.centent{float:left; width:140px; margin-right: 10px; text-align:center;}
	.centent .btn span{ display: block; height: 28px; line-height: 28px; background-color: #f0f0f0; margin-top:5px; cursor: pointer;}
	.centent .btn span.hover{background-color: green; color: #fff;}
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script>
	$(function(){
		//移到右边
	    $('#add').bind('click',function() {
	    	//获取 选中的 选项，删除并追加给对方
	        $('#select1 option:selected').appendTo('#select2');
	    });
	    //移到左边
	    $('#remove').bind('click',function() {
	        $('#select2 option:selected').appendTo('#select1');
	    });
	    //全部移到右边
	    $('#add_all').bind('click',function(){
	    	//获取 全部的 选项,删除并追加给对方
	    	$('#select1 option').appendTo('#select2');
	    });
	    //全部移到右边
	    $('#remove_all').bind('click',function(){
	    	$('#select2 option').appendTo('#select1');
	    });
	    //双击选项
	    $('#select1').bind('dblclick',function(){
    		//获取全部的选项,删除并追加给对方
	    	$("option:selected",this).appendTo('#select2'); //追加给对方
	    });
	    $('#select2').bind('dblclick',function(){
    		//获取全部的选项,删除并追加给对方
	    	$("option:selected",this).appendTo('#select1'); //追加给对方
	    });
	});
	</script>
</head>
<body>
	<div class="wrapper">
		<div class="centent">
			<select multiple="multiple" id="select1" style="width:100px;height:160px;">
				<option value="1">选项1</option>
				<option value="2">选项2</option>
				<option value="3">选项3</option>
				<option value="4">选项4</option>
				<option value="5">选项5</option>
				<option value="6">选项6</option>
				<option value="7">选项7</option>
			</select>
			<div class="btn">
				<span id="add" >选中添加到右边>></span>
				<span id="add_all" >全部添加到右边>></span>
			</div>
		</div>
		<div class="centent">
			<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
				<option value="8">选项8</option>
			</select>
			<div class="btn">
				<span id="remove"><<选中删除到左边</span>
				<span id="remove_all"><<全部删除到左边</span>
			</div>
		</div>
	</div>
</body>
</html>