jquery实现select框内容的左右移动【经典】

原创 2012年03月22日 08:55:20

<!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>select选框</title>
<style>
#div1{
position:relative;
margin-right:10px;
float:left;
}


</style>


<script language="javascript" type="text/javascript" src="../jquery-1.7.1.js"></script>


<script language="javascript" type="text/javascript">


$(document).ready(function (){
//双击将选中的option追加至select2中
$("#select1").dblclick(function (){

$("#select1 option:selected").prependTo("#select2");
});

//双击将选中的option追加至select1中
$("#select2").dblclick(function (){

$("#select2 option:selected").prependTo("#select1");
});

//点击第一个button按钮,将select1中选中的option追加到select2中
$("#btn1").click(function (){
$("#select1 option:selected").prependTo("#select2");
});


//点击第二个button按钮,将select1中的option全部到select2中
$("#btn2").click(function (){
$("#select1 option").prependTo("#select2");
});


//点击第三个button按钮,将select2中选中的option追加到select1中
$("#btn3").click(function (){
$("#select2 option:selected").prependTo("#select1");
});

//点击第四个button按钮,select2中的option全部到select1中
$("#btn4").click(function (){
$("#select2 option").prependTo("#select1");
});

});




</script>
</head>


<body>
<div id="div1">
选框一<br>
<select id="select1" multiple="multiple" style="width:100px; height:100px;">


<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<input type="button" id="btn2" value="全>>" />
<input type="button" id="btn1" value=">>" />
</div>
<div id="div2">
选框二<br>
<select id="select2" multiple="multiple" style="width:100px; height:100px;">




</select>
<br>
<input type="button" id="btn3" value="<<" />
<input type="button" id="btn4" value="<<全" />
</div>
</body>

</html>

jQuery实现select下拉框左右选择_交换内容

jquery角色左右选择框,把左侧的内容选择后显示在右边,可修改成角色选择器。适用浏览器:IE8、360、FireFox、Chrome、Opera、傲游等,本人不太喜欢苹果的产品,所以没有考虑Safa...

jquery实现select多选框的左右移动

无标题文档 /**  *动态的给左边的下拉列表创建选项  *具体情况可以从数据库读取数据动态创建选项  */ $(document).ready(function(){  ...

jquery实现下拉框内容左右移动

每天来看一下。博客写了没人看委屈,还是要坚持继续写下去呀,留着自己看哈 如题,下面先来说一下jquery实现下拉框中的内容左右移动的思路(个人理解) jquery代码(不考虑静态页面)先来...

Jquery实现SELECT多选并且左右上下移动

直接贴代码吧:

jQuery实现选项内容的左右移动效果

无标题文档 $(document).ready(function (){ //为添加按钮增加事件 $("#leftbtn").click(function (){ ...
  • Oo__YAN
  • Oo__YAN
  • 2012年03月21日 19:32
  • 4187

Select JQuery 实现左右复制移动内容

Select JQuery 实现左右复制移动内容 引入的文件为 双击也可以移动 javascript代码:     $(function(){         //移到右...
  • KJinfei
  • KJinfei
  • 2017年11月13日 13:08
  • 45

jQuery实现鼠标划过文字左右移动

  • 2010年12月24日 14:29
  • 39KB
  • 下载

Jquery实现数据左右移动Demo

  • 2014年02月17日 17:16
  • 62KB
  • 下载

使用jquery实现上下左右移动效果

1                 2                 3                 4                 5                 6   ...

jquery实现左右上下移动

最近再做报表时候,直接把全部字段都导出了,但这不太灵活。回忆老师讲过的项目做报表如下左右上下移功能灵活控制,所以就尝试下咯。 js代码 function selected(thiz) { v...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现select框内容的左右移动【经典】
举报原因:
原因补充:

(最多只允许输入30个字)