Jquery实现选中左边的下拉菜单点击按钮之后跑右边
script代码：
<scripttype="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("#select1option:selected").appendTo("#select2");
});
$("#remove").click(function(){
$("#select2option:selected").appendTo("#select1");
});
//双击选项的时候实现右移,双击事件：dblclick
$("#select1").dblclick(function(){
$("#select1option:selected").appendTo("#select2");
});
//双击选项的时候实现左移,双击事件：dblclick
$("#select2").dblclick(function(){
$("#select2option:selected").appendTo("#select1");
});
//点击提交按钮查看所选内容
$("#send").click(function(){
varstr="你选择的是：";
$("#select2option").each(function(){
str+=$(this).val()+",";//接收显示所选复选框的内容
});
alert(str);
});
});
</script>
html代码：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<!--Appledevicesfullscreen-->
<metaname="apple-mobile-web-app-capable"content="yes"/>
<!--Appledevicesfullscreen-->
<metanames="apple-mobile-web-app-status-bar-style"content="black-translucent"/>
<title>用户管理</title>
<!--Bootstrap-->
<linkrel="stylesheet"href="css/bootstrap.min.css">
<!--Bootstrapresponsive-->
<linkrel="stylesheet"href="css/bootstrap-responsive.min.css">
<!--ThemeCSS-->
<linkrel="stylesheet"href="css/style.css">
<!--ColorCSS-->
<linkrel="stylesheet"href="css/themes.css">
<scripttype="text/javascript"src="js/jquery-1.6.1.min.js"></script>
<!--jQuery-->
<scriptsrc="js/jquery.min.js"tppabs="http://www.eakroko.de/flat/js/jquery.min.js"></script>
<!--Bootstrap-->
<scriptsrc="js/bootstrap.min.js"></script>
<!--[iflteIE9]>
<scriptsrc="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-->
<linkrel="shortcuticon"href="img/favicon.ico"/>
<!--AppledevicesHomescreenicon-->
<linkrel="apple-touch-icon-precomposed"href="img/apple-touch-icon-precomposed.png"/>
<scripttype="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("#select1option:selected").appendTo("#select2");
});
$("#remove").click(function(){
$("#select2option:selected").appendTo("#select1");
});
//双击选项的时候实现右移,双击事件：dblclick
$("#select1").dblclick(function(){
$("#select1option:selected").appendTo("#select2");
});
//双击选项的时候实现左移,双击事件：dblclick
$("#select2").dblclick(function(){
$("#select2option:selected").appendTo("#select1");
});
//点击提交按钮查看所选内容
$("#send").click(function(){
varstr="你选择的是：";
$("#select2option").each(function(){
str+=$(this).val()+",";//接收显示所选复选框的内容
});
alert(str);
});
});
</script>
</head>
<body>
<divclass="container-fluid"style="margin-top:100px;">
<divclass="row-fluid">
<divclass="span5text-right">
<selectmultiple="multiple"id="select1">
<optionvalue="1">选项1</option>
<optionvalue="2">选项2</option>
<optionvalue="3">选项3</option>
<optionvalue="4">选项4</option>
<optionvalue="5">选项5</option>
<optionvalue="6">选项6</option>
<optionvalue="7">选项7</option>
</select>
</div>
<divclass="span2text-center">
<divclass="row-fluid">
<divclass="span12">
<aclass="btn"href="#"><iclass="icon-arrow-right"></i><spanid="add">选中右移</span></a>
</div>
</div>
<divclass="row-fluid"style="margin-top:5px;">
<divclass="span12">
<aclass="btn"href="#"><iclass="icon-arrow-left"></i><spanid="remove">选中左移</span></a>
</div>
</div>
</div>
<divclass="span5">
<selectmultiple="multiple"id="select2">
</select>
</div>
</div>
<divclass="row-fluid">
<divclass="span12text-center">
<inputtype="button"class="btnbtn-primary"id="send"value="提交"/>
</div>
</div>
</div>
</body>
</html>