您的位置：首页 > Web前端 > JQuery

jquery学习之1.17-小练习2-左右选项框内容移动

2014-03-28 11:07 399 查看

实现选项框内容互换，使用主要语句为$("#left option").appendTo($("#right"));

效果如下图：支持双击实现移动以及按钮实现移动

<%@ page language="java" import="java.util.*"
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>11</title>
<style type="text/css">
body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;}
div{background:yellow;float:left;}
select{width:70px}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.js">
</script>
<script language="javascript">
$(document).ready(function()
{
//**********************左右移动*******
$("#bt1").click(
function()
{
$("#left option:selected").appendTo($("#right"));
});
$("#bt2").click(
function()
{
$("#left option").appendTo($("#right"));
});
$("#bt3").click(
function()
{
$("#right option:selected").appendTo($("#left"));
});
$("#bt4").click(
function()
{
$("#right option").appendTo($("#left"));
});
//双击事件绑定
$("#left").dblclick(function(){
$("#left option:selected").appendTo($("#right"));
});
$("#right").dblclick(function(){
$("#right option:selected").appendTo($("#left"));
});
});

</script>
</head>
<body>
<div >
<div >
<select multiple="multiple" size="6" id="left" >
<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>
</select>
</div>
<div >
<input type="button"  id="bt1" value="- >" ></input>
<br/>
<input type="button"  id="bt2" value="=>" ></input>
<br/>
<input type="button"  id="bt3"  value="< -" ></input>
<br/>
<input type="button"  id="bt4"  value="<=" ></input>
</div>
<div >
<select multiple="multiple" size="6" id="right" >
</select>
</div>
</div>

</body>
</html>

my Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航