Jquery实现选中左边的下拉菜单点击按钮之后跑右边

最新推荐文章于 2017-08-23 14:29:39 发布

破逼名总重复

最新推荐文章于 2017-08-23 14:29:39 发布

阅读量667

点赞数

分类专栏： Web前端文章标签： jquery html ViewUI

本文链接：https://blog.csdn.net/u013257544/article/details/84549342

版权

Web前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

[size=large][b]script代码：[/b][/size]
<script type="text/javascript">
$(document).ready(function(){

$("#add").click(function(){

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

});

$("#remove").click(function(){

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

});

//双击选项的时候实现右移,双击事件：dblclick
$("#select1").dblclick(function(){

$("#select1 option:selected").appendTo("#select2");
});
//双击选项的时候实现左移,双击事件：dblclick
$("#select2").dblclick(function(){

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

//点击提交按钮查看所选内容
$("#send").click(function(){

var str="你选择的是：";
$("#select2 option").each(function(){

str+=$(this).val()+",";//接收显示所选复选框的内容
});

alert(str);
});
});

</script>

[size=large][b]html代码：[/b][/size]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<title>用户管理</title>


<link rel="stylesheet" href="css/bootstrap.min.css" >

<link rel="stylesheet" href="css/bootstrap-responsive.min.css" >


<link rel="stylesheet" href="css/style.css" >

<link rel="stylesheet" href="css/themes.css" >

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

<script src="js/jquery.min.js" tppabs="http://www.eakroko.de/flat/js/jquery.min.js"></script>

<script src="js/bootstrap.min.js" ></script>




<link rel="shortcut icon" href="img/favicon.ico" />

<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />

<script type="text/javascript">
$(document).ready(function(){

$("#add").click(function(){

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

});

$("#remove").click(function(){

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

});

//双击选项的时候实现右移,双击事件：dblclick
$("#select1").dblclick(function(){

$("#select1 option:selected").appendTo("#select2");
});
//双击选项的时候实现左移,双击事件：dblclick
$("#select2").dblclick(function(){

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

//点击提交按钮查看所选内容
$("#send").click(function(){

var str="你选择的是：";
$("#select2 option").each(function(){

str+=$(this).val()+",";//接收显示所选复选框的内容
});

alert(str);
});
});

</script>
</head>

<body>
<div class="container-fluid" style="margin-top:100px;">
<div class="row-fluid">
<div class="span5 text-right">
<select multiple="multiple" id="select1">
<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>
</select>
</div>
<div class="span2 text-center">
<div class="row-fluid">
<div class="span12">
<a class="btn" href="#"><i class=" icon-arrow-right " ></i><span id="add">选中右移</span></a>
</div>
</div>
<div class="row-fluid" style="margin-top:5px;">
<div class="span12">
<a class="btn" href="#"><i class=" icon-arrow-left " ></i><span id="remove">选中左移</span></a>
</div>
</div>
</div>
<div class="span5">
<select multiple="multiple" id="select2">
</select>
</div>
</div>
<div class="row-fluid">
<div class="span12 text-center">
<input type="button" class="btn btn-primary" id="send" value="提交"/>
</div>
</div>
</div>
</body>
</html>

破逼名总重复

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现选中左边的下拉菜单点击按钮之后跑右边

[size=large][b]script代码：[/b][/size] $(document).ready(function(){ $("#add").click(function(){ $("#select1 option:selected").appendTo("#select2"); ...
复制链接

扫一扫

专栏目录