[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" />
<!-- Apple devices fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Apple devices fullscreen -->
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>用户管理</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<!-- Bootstrap responsive -->
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" >
<!-- Theme CSS -->
<link rel="stylesheet" href="css/style.css" >
<!-- Color CSS -->
<link rel="stylesheet" href="css/themes.css" >
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js" tppabs="http://www.eakroko.de/flat/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" ></script>
<!--[if lte IE 9]>
<script src="js/plugins/placeholder/jquery.placeholder.min.js" tppabs="http://www.eakroko.de/flat/js/plugins/placeholder/jquery.placeholder.min.js"></script>
<script>
$(document).ready(function() {
$('input, textarea').placeholder();
});
</script>
<![endif]-->
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Apple devices Homescreen icon -->
<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>
<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" />
<!-- Apple devices fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Apple devices fullscreen -->
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>用户管理</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<!-- Bootstrap responsive -->
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" >
<!-- Theme CSS -->
<link rel="stylesheet" href="css/style.css" >
<!-- Color CSS -->
<link rel="stylesheet" href="css/themes.css" >
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js" tppabs="http://www.eakroko.de/flat/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" ></script>
<!--[if lte IE 9]>
<script src="js/plugins/placeholder/jquery.placeholder.min.js" tppabs="http://www.eakroko.de/flat/js/plugins/placeholder/jquery.placeholder.min.js"></script>
<script>
$(document).ready(function() {
$('input, textarea').placeholder();
});
</script>
<![endif]-->
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Apple devices Homescreen icon -->
<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>