jQuery左右选择框

<!DOCTYPE html>
<html>
<head>
<title>左右选择框</title>  <style type="text/css">
/*.s1{width:120px;}
#d1{width:510px;height:320px;background-color:#F5DEB3;margin:0 auto;}
#d2{height:30px;font-size:24px;background-color:blue;color:white;}
#d3{padding-left:30px;}*/
</style><script type="text/javascript" src="./jquery-1.4.3.js"></script>
</head>
<body>  <div id="d1"><div id="d2">选择</div><div id="d3"><table cellpadding="0" cellspacing="8"><tbody><tr><td>左</td><td>&nbsp;</td><td>右</td></tr><tr><td><select id="s1" name="s1" style="width:150px; height:220px;" multiple="multiple"><option value="hh">W1</option></select></td><td><p><input id="b1" type="button" class="s1" value="--&gt;"></p><p><input type="button" id="b2" class="s1" value="--&gt;&gt;"></p><p><input type="button" id="b3" class="s1" value="&lt;--"></p><p><input type="button" id="b4" class="s1" value="&lt;&lt;--"></p></td><td><select id="s2" name="s2" style="width:150px;height:220px;" multiple="multiple"><option value="zsf">12321</option><option value="xrr">23</option></select></td></tr></tbody></table></div>
</div><script type="text/javascript">$(function(){$('#b1').click(function(){$obj = $('select option:selected').clone(true);if($obj.size() == 0){alert("请至少选择一条!");}$('#s2').append($obj);$('select option:selected').remove();});$('#b2').click(function(){$('#s2').append($('#s1 option'));});$('#b3').click(function(){$obj = $('select option:selected').clone(true);if($obj.size() == 0){alert("请至少选择一条!");}$('#s1').append($obj);$('select option:selected').remove();});$('#b4').click(function(){$('#s1').append($('#s2 option'));});$('option').dblclick(function(){var flag = $(this).parent().attr('id');if(flag == "s1"){var $obj = $(this).clone(true);$('#s2').append($obj);$(this).remove();} else {var $obj = $(this).clone(true);$('#s1').append($obj);$(this).remove();}});});</script>
</body>  </html>

引入jQuery即可

转载于:https://www.cnblogs.com/moli-/p/6429946.html

jQuery左右选择框相关推荐

JQuery 日期选择框，精确到时分秒类型。
貌似升级了,官方网址:http://www.jemui.com/uidoc/jedate.html 本教程源码下载:http://download.csdn.net/detail/tmaskboy/9 ...
html 12306页面实现,jQuery模拟12306城市选择框功能简单实现方法示例
本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法.分享给大家供大家参考,具体如下: www.jb51.net jQuery城市选择框 #parent{ width:500px; po ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
用jquery修改默认的单选框radio或者复选框checkbox选择框样式
默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...
jQuery日期弹出选择框Datepicker效果
无论你是一个机票在线预定网站设计师,还是一个工程任务管理者,抑或在你的注册表单上有个生日填写项目:本文即将提到的日历日期选择弹出窗口都将帮助你简化用户操作,提高网站的用户体验和易用性. 教程目标:教会 ...
如何删除选择框的所有选项，然后添加一个选项并使用jQuery选择它？
本文翻译自:How do you remove all the options of a select box and then add one option and select it with j ...
演员选择框三级联动（原生javascript和jquery实现）
使用Jquery做成选择演员选择框的三级联动效果.代码如下,测试可以下载附件. <html><head><meta http-equiv="Content-Ty ...
jquery.chosen.css,jquery-chosen 选择框插件
Chosen 是一个 JavaScript 插件,它能让丑陋的.很长的 select 选择框变的更好看.更方便,不仅如此,它更扩大了,增长了主动筛选的功能.它可对列表进行分组,同时也可禁用某些选择项. ...
java 输入框插件_[Java教程][英] 推荐 15 个 jQuery 选择框插件
[Java教程][英] 推荐 15 个 jQuery 选择框插件 0 2015-07-23 15:00:06 jQuery Selectbox Plugins let you create beaut ...

jQuery左右选择框

jQuery左右选择框相关推荐

最新文章

热门文章