<JQuery>双下拉框内容移动

最新推荐文章于 2020-08-03 20:49:56 发布

原创最新推荐文章于 2020-08-03 20:49:56 发布 · 置顶 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #button #xhtml #class #div

Javascript/Jquery 专栏收录该内容

8 篇文章

订阅专栏

看了视频教程以后自己动手做了一个，内容差不多，具体代码如下（首先要下一个JQuery库，在网站www.jquery.com上面可以免费下载）：

<!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>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){  
		//移到右边
		$("#right").click(function(){
			$("#select1 option:selected").appendTo("#select2");
		});
		//移到左边
		$("#left").click(function(){
			$("#select2 option:selected").appendTo("#select1");
		});
		//全部移到右边
		$("#right_all").click(function(){
			$("#select1 option").appendTo("#select2");
		});
		//全部移到左边
		$("#left_all").click(function(){
			$("#select2 option").appendTo("#select1");
		});
		//双击选项
		$("#select1").dblclick(function(){
			$("#select1 option:selected").appendTo("#select2");
		});
		//双击选项
		$("#select2").dblclick(function(){
			$("#select2 option:selected").appendTo("#select1");
		});
	});
</script>
<style type="text/css">
div.content{
	float:left;
	margin:10px;
	text-align:center;
}
button{
	display:block;
	margin:2px 2px;
	padding:4px 10px;
}
</style>
</head>

<body>
<div class="content">
<select multiple="multiple" id="select1" style="width:100px; height:160px" >
  <option value="1">girl_one</option>
  <option value="2">girl_two</option>
  <option value="3">girl_three</option>
  <option value="4">girl_four</option>
  <option value="5">girl_five</option>
  <option value="6">girl_six</option>
</select>
  <div>
    <button id="right">选中向右>></button>
    <button id="right_all">全部向右>></button>
  </div>
</div>
<div class="content">
<select multiple="multiple" id="select2" style="width:100px; height:160px" >
  <option value="7">boy_one</option>
  <option value="8">boy_two</option>
  <option value="9">boy_three</option>
  <option value="10">boy_four</option>
  <option value="11">boy_five</option>
</select>
  <div>
    <button id="left">选中向左>></button>
    <button id="left_all">全部向左>></button>
  </div>
</div>
</body>
</html>

IE下显示效果如下：