基于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事件实现代码
Mar 12 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
JS中数组重排序方法
Nov 11 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
基于javascript的无缝滚动动画1
Aug 07 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中随机显示图片的函数代码
2011/06/23 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
php实现微信支付之退款功能
2018/05/30 PHP
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python实现高斯投影正反算方式
2020/01/17 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
思品教学工作总结
2015/08/10 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL