jquery制作select列表双向选择示例代码


Posted in Javascript onSeptember 02, 2014

jquery制作的select列表双向选择,兼容性肯定是不错的,需要的朋友可以学习下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 

<style> 
.sel{width:150px;height:200px;} 
.btn{width:50px;font-weight:bold;font-size:14px; } 
</style> 
</HEAD> 

<BODY> 
<table> 
<tr> 
<td> 
<select multiple class="sel" id="sel_left"> 
<option value="a">aaaaaaaaaaa</option> 
<option value="b">bbbbbbbbbbb</option> 
<option value="c">ccccccccccc</option> 
<option value="d">ddddddddddd</option> 
<option value="e">eeeeeeeeeee</option> 
</select> 
</td> 
<td> 
<p><button class="btn" id="btn_1">>> </button></p> 
<p><button class="btn" id="btn_2">></button></p> 
<p><button class="btn" id="btn_3"><</button></p> 
<p><button class="btn" id="btn_4"><<</button></p> 

</td> 
<td> 
<select multiple class="sel" id="sel_right"> 
<option value="f">fffffffffff</option> 
</select> 
</td> 
</tr> 
</table> 
</BODY> 
<script> 
$(function(){ 
$("#sel_left,#sel_right").bind("change",checkBtn); 
$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn); 
checkBtn(); 
}); 

function checkBtn(){ 
jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled"); 
jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled"); 
jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled"); 
jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled"); 
} 

function clickBtn(e){ 
if("btn_1" == e.target.id){ 
jQuery("#sel_left>option").appendTo("#sel_right"); 
}else if("btn_2" == e.target.id){ 
jQuery("#sel_left option:selected").appendTo("#sel_right"); 
}else if("btn_3" == e.target.id){ 
jQuery("#sel_right option:selected").appendTo("#sel_left"); 
}else if("btn_4" == e.target.id){ 
jQuery("#sel_right>option").appendTo("#sel_left"); 
} 
checkBtn(); 
} 
</script> 
</HTML>
Javascript 相关文章推荐
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
javascript包装对象实例分析
Mar 27 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
一个获取第n个元素节点的js函数
Sep 02 #Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 #Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 #Javascript
JavaScript判断文件上传类型的方法
Sep 02 #Javascript
JavaScript中九种常用排序算法
Sep 02 #Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 #Javascript
解决jquery版本冲突的有效方法
Sep 02 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
Terran热键控制
2020/03/14 星际争霸
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
python自动zip压缩目录的方法
2015/06/28 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python相对企业语言优势在哪
2020/06/12 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
怎样自定义一个异常类
2016/09/27 面试题
文员个人求职自荐信
2013/09/21 职场文书
函授本科毕业自我鉴定
2013/10/09 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers