基于JQUERY的两个ListBox子项互相调整的实现代码


Posted in Javascript onMay 07, 2011

HTML:

<div id="divObj3" class="divContent"> 
<input id="hidColorSelect" name="ColorSelect" type="hidden" value="3,5,6,11,12,13,14" /> 
<table style="width: 100%; text-align: center;"> 
<tr class="tr"> 
<td class="tdr" align="center" width="50%"> 
<span id="ctl00_ContentPlaceHolder1_WebPanel4_Label7">未选择颜色</span> : 
</td> 
<td class="tdl" width="1%"> 
</td> 
<td class="tdr" align="center" width="50%"> 
<span id="ctl00_ContentPlaceHolder1_WebPanel4_Label8">已选择颜色</span> : 
</td> 
</tr> 
<tr class="tr"> 
<td align="right"> 
<select id="colorUnSelect" multiple="multiple" name="unSelectColors" ondblclick="listMove('colorSelect','colorUnSelect','hidColorSelect',true,this.selectedIndex)" size="8" style="height: 200px; width: 90%;"><option value="4">蓝色</option> 
<option value="21">红色132</option> 
</select> 
</td> 
<td> 
<img alt="" name="btnRAdd" id="btnRAdd1" src="/Content/images/%E4%B8%8B%E4%B8%80%E9%A1%B5.jpg" style="border-width: 0px;cursor:hand;" onclick="listMove('colorSelect','colorUnSelect','hidColorSelect',true)" /> 
<img alt="" name="btnRDrop" id="btnRDrop1" src="/Content/images/%E5%89%8D%E4%B8%80%E9%A1%B5.jpg" style="border-width: 0px;cursor:hand;" onclick="listMove('colorSelect','colorUnSelect','hidColorSelect',false)" /> 
</td> 
<td align="left"> 
<select id="colorSelect" multiple="multiple" name="selectColors" 
ondblclick="listMove('colorSelect','colorUnSelect','hidColorSelect',false,this.selectedIndex)" 
size="8" style="height: 200px; width: 90%;"> 
<option value="3">红色</option> 
<option value="5">紫色</option> 
<option value="6">黄色</option> 
<option value="11">黑色</option> 
<option value="12">白色</option> 
<option value="13">绿色</option> 
<option value="14">粉红色</option> 
</select> 
</td> 
</tr> 
</table> 
</div>

对应JS方法:
function listMove(main, follow, hidetextbox, isBack, index) { 
if (index < 0) 
return; 
var o = undefined; 
var source; 
var distinct; 
var dddd; 
if (!isBack) { 
//使用getElementById在IE6中存在BUG 
source = $('#' + main);// window.document.getElementById(main); 
distinct = $('#' + follow); //window.document.getElementById(follow); 
} 
else { 
source = $('#' + follow); // window.document.getElementById(follow); 
distinct = $('#' + main); // window.document.getElementById(main); 
} 
var hid = $('#' + hidetextbox)[0]; // document.getElementById(hidetextbox); 
if (index != undefined) { 
var op = "option:eq(" + index + ")"; 
source.find(op).each(function () { 
distinct.append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>"); 
$(this).remove(); 
}); 
} 
else { 
source.find("option:selected").each(function () { 
$(this).remove(); 
distinct.append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>"); 
}); 
} 
var str = ""; 
//遍历Listbox,取得选中项的值 
$('#' + main + ' option').each(function () { 
str += $(this).val() + ','; 
}); 
hid.value = str; 
}
Javascript 相关文章推荐
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
jQuery实现高级检索功能
May 28 jQuery
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 #Javascript
基于jQuery的倒计时插件代码
May 07 #Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 #Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 #Javascript
jQuery1.6 正式版发布并提供下载
May 05 #Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 #Javascript
jQuery bind事件使用详解
May 05 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
素质拓展感言
2014/01/29 职场文书
党员承诺书内容
2014/03/26 职场文书
通知范文怎么写
2015/04/16 职场文书
面试通知短信
2015/04/20 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
Java 数据结构七大排序使用分析
2022/04/02 Java/Android