jquery制作select列表双向选择示例代码
更新时间：2014年09月02日 16:16:21 投稿：whsnow
看着标题就知道它是什么意思了，select列表双向选择，jquery制作的，兼容性肯定是不错的
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>
您可能感兴趣的文章:
- 基于JQuery实现的Select级联
- jquery取消选择select下拉框示例代码
- jquery实现省市select下拉框的替换(示例代码)
- jquery 操作两个select实现值之间的互相传递
- jQuery取得设置清空select选择的文本与值
- jquery 实现两Select 标签项互调示例代码
- jQuery制作简洁的多级联动Select下拉框
- jQuery中:selected选择器用法实例
- jquery操作select方法汇总
- Jquery对select的增、删、改、查操作
- jquery实现动态操作select选中
- JQuery select（下拉框）操作方法汇总
- jquery使用ul模拟select实现表单美化的方法
- jQuery实现的仿select功能代码
- 基于jquery实现select选择框内容左右移动添加删除代码分享
相关文章
在实际开发中经常会遇到数据没发生改变是，由于用户不小心点击保存，这样导致数据库的日志增大；还有数据填写好后，忘了添加保存直接关闭页面离开。2011-04-04
尺寸小、使用简单方便（Write Less, Do More，吃得少干得多，而且目前许多大公司都在支持JQuery，例如微软，微软把JQuery继承在了vs2010中2012-04-04
这篇文章主要介绍了jQuery实现文本框邮箱输入自动补全效果，大家无需输入完全部邮箱信息，感兴趣的小伙伴们可以参考一下2015-11-11
本文是小编根据bootstrap的折叠设计的树状图显示效果，只有二级显示，可以用在简单的目录等。对实现代码感兴趣的朋友可以参考下本文2016-11-11
在开发的过程中，经常会遇到弹出框显示前一页table列表的情况，这时候会有好多方法来来解决。下面小编给大家介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值，需要的朋友参考下2017-03-03
jQuery UI Autocomplete 1.8.16 中文输入修正代码
jQuery UI Autocomplete 1.8.16 中文输入修正代码，使用jQuery UI Autocomplete的朋友可以参考下2012-04-04
position方法获取匹配元素相对父元素的偏移。接下来通过本文给大家分享jQuery Position方法使用和兼容性的相关知识，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要介绍了jQuery源码解读之addClass()方法,注释形式较为详细的分析了addClass()方法的实现技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了jquery实现计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
js制作的鼠标悬浮时产生的下拉框效果，需要的朋友可以参考下2012-10-10
最新评论