jquery select 移动

最新推荐文章于 2024-01-25 00:14:46 发布

原创最新推荐文章于 2024-01-25 00:14:46 发布 · 336 阅读

CC 4.0 BY-SA版权

13 篇文章

订阅专栏

本文提供了一个使用HTML和JavaScript实现的选项移动示例，通过按钮点击可以将下拉选项从一个选择框移动到另一个选择框，同时支持双击选项进行移动。

<body>
	<h2>select 移动</h2>
	<select multiple="multiple" id="shandong">
	<option>青岛</option>
	<option>烟台</option>
	<option>济南</option>
	<option>潍坊</option>

	</select>
	<input type="button" value="-->" onclick="toRight()" />
	<input type="button" value="==>" onclick="toAllRight()" />
	<input type="button" value="<--" onclick="toLeft()" />
	<input type="button" value="<==" onclick="toAllLeft()" />

	<select multiple="multiple" id="beijing">
	<option>朝阳</option>
	<option>大兴</option>
	<option>通州</option>
	<option>海淀</option>

	</select>
	</body>
	</html>
	<script>
	$(document).ready(function(e) {
	$("option").dblclick(function(){
	if($(this).parent().attr('id')=='shandong'){
	$(this).appendTo($('#beijing'));
	}else{
	$(this).appendTo($('#shandong'));
	}
	//alert($(this).parent().attr('id'));
	});
	});
	function toRight(){
	$("#shandong option:selected").appendTo($("#beijing"))
	}
	function toAllRight(){
	$("#shandong option").appendTo($("#beijing"))
	}
	function toLeft(){
	$("#beijing option:selected").appendTo($("#shandong"))
	}
	function toAllLeft(){