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 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
对javascript继承的理解
Oct 11 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 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
一个分页的论坛
2006/10/09 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue多次循环操作示例
2019/02/08 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python生成word合同的实例方法
2021/01/12 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
python glom模块的使用简介
2021/04/13 Python
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android