jquery 操作listbox 左右相互选择

实现左右两个listbox的相互选择功能

代码如下:

 1         function ListBox_Move(listfrom, listto) {
 2             var size = $j("#" + listfrom + " option").size();
 3             var selsize = $j("#" + listfrom + " option:selected").size();
 4             var strvalue = "";
 5             if (size > 0 && selsize > 0) {
 6                 $j.each($j("#" + listfrom + " option:selected"), function(i, own) {
 7                     var sText = $j(own).text();
 8                     var sValue = $j(own).val();
 9                     var flag = true;
10                     $j.each($j("#" + listto + " option"), function(id, ownto) {
11                         if ($j(ownto).val() == sValue) {
12                             flag = false;
13                         }
14                     });
15                     if (flag) {
16                         $j("#" + listto).append("<option value=\"" + sValue + "\">" + sText + "</option>");
17                         strvalue += $j(own).text() + ":" + $j(own).val();
18                         strvalue += ",";
19                     }
20                     $j(own).remove();
21                     $j("#" + listfrom + "").children("option:first").attr("selected", true);
22                 });
23             } else {
24                 if (listfrom==‘listbCos‘) {
25                     alert(‘请先选择要导入的信息!‘);
26                 } else {
27                     alert(‘请先选择要删除的信息!‘);
28                 }
29             }
30         }

界面元素:

 1      <td width="28%">
 2            <input id="txtCos" type="text"  width="100%" />
 3            <select  id="listbCos"  multiple="Multiple" style="width: 200px; height: 130px;"></select>
 4          </td>
 5          <td align="center " width="12%"><br/> <br/> <br/>
 6             <input type="button" id="btnImport" value="    导入>>    " style="cursor :pointer"  onclick="ListBox_Move(‘listbCos‘,‘listbContent‘)"/><br/><br/>
 7             <input type="button" id="btnDel" value="    <<删除    "   style="cursor :pointer" onclick="ListBox_Move(‘listbContent‘,‘listbCos‘)"/><br/> <br/><br/>
 8          </td>
 9          <td width="28%">
10              <select  id="listbContent"  multiple="Multiple" style="width: 200px; height: 150px;"></select>
11          </td>
时间: 2024-08-06 15:41:25

jquery 操作listbox 左右相互选择的相关文章

jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquery对象集中的jquery对象元素: $('img[alt]').eq(0) $('img[alt]').first(

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

jQuery操作Dom、jQuery事件机制、jQuery补充部分

jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要修改的属性,就会进行修改,如果没有,直接添加 例:$("a").attr("href","http://www.baidu.com"); 修改多个属性值: //attr(obj) $(“img”).attr({ “title”: ”文件名称”, “s

Jquery 系列(2) 选择元素

Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选择页面元素更灵活的DOM遍历方法 理解DOM树 DOM(Document Object Model)文档对象模型,可以充当JavaScript和网页之间的接口.jQuery最强大的功能就是能轻松的处理和简化在DOM中选择元素.DOM中各元素的关系,同数据结构中的二叉树的称呼非常相近.元素之间的关系包

jquery 操作iframe的几种方法总结

iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text&

Jquery 操作IFrame

使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id="mainiframe..</iframe> leftiframe中jQuery改变mainiframe的src代码: $("#mainframe",parent.document.body).attr("src","http://ww

对jquery操作复选框

摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面--

jQuery操作表格(table)的常用方法、技巧汇总

摘录自:http://www.jb51.net/article/48943.htm 虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率 以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){  

jQuery组织您钞四----jQuery操作DOM

一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. 看一个样例 实例4-1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>