jQuery表单之 Select

最新推荐文章于 2020-12-11 14:42:13 发布

ruxingli

最新推荐文章于 2020-12-11 14:42:13 发布

阅读量2.6k

点赞数 1

分类专栏：点滴jQuery 文章标签： jquery function button input

本文链接：https://blog.csdn.net/liruxing1715/article/details/7702722

版权

点滴jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<script src="http://www.gamejzy.com/js/jquery.js" type="text/javascript"></script>
<p>
<select id="select1" multiple 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>
	<option value="8">选项8</option>
</select>     
<select id="select2" multiple style="width:100px;height:160px;"></select>
</p>
<p><input type="button" value="选中添加到右边" id="add_selected" /> <input type="button" value="选中删除到左边" id="remove_selected" /></p>
<p><input type="button" value="全部添加到右边" id="add_all" /> <input type="button" value="全部删除到左边" id="remove_all" /></p>
<script type="text/javascript">
$(document).ready(function(){
	$("#add_selected").bind('click', function(){
		$options = $("#select1 option:selected"); //获取选中的选项
		$options.appendTo('#select2');            //追加给对方
	})
	$("#remove_selected").bind('click', function(){
		$options = $("#select2 option:selected"); //获取选中的选项
		$options.appendTo('#select1');            //追加给对方
	})
	$("#add_all").bind('click', function(){
		$options = $("#select1 option");          //获取选中的选项
		$options.appendTo('#select2');            //追加给对方
	})
	$("#remove_all").bind('click', function(){
		$options = $("#select2 option");          //获取选中的选项
		$options.appendTo('#select1');            //追加给对方
	})
})
</script>

效果图展示：