jquery制作select列表双向选择｜牛博-牛腩的博客|www.niunan.org

来源：百度文库 编辑：神马文学网 时间：2024/04/30 03:40:59
jquery制作select列表双向选择编辑      做项目的时候要用到的一个小功能，以前做过的，用的纯JS，今天翻出来看发现只能在IE中运行的，自己改成jquery的了，该功能很常见，不过一直不知道他的学名叫什么，所以也就随便起个了，大家看下面的图都应该知道了：

下面是整个网站的HTML代码，用的时候记得导入jquery就行了。
源代码复制(IE有效)打印关于
  1. >  
  2.  xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4.     </font></strong>select列表双向选择<strong><font color="#006699">  
  5.      type="text/css">  
  6.         select   
  7.         {   
  8.             width: 100%;               
  9.             height: 160px;   
  10.         }   
  11.         div   
  12.         {   
  13.             float: left;   
  14.         }   
  15.         #div1, #div3   
  16.         {   
  17.             width: 150px;   
  18.         }   
  19.         #div2   
  20.         {   
  21.             width: 120px;   
  22.         }   
  23.         .btn   
  24.         {   
  25.             display: block;   
  26.             margin: 10px auto;   
  27.             width: 80px;   
  28.         }   
  29.       
  30.   
  31.   
  32.      id="div1">  
  33.          id="dltSource" name="dltSource" size="10" multiple="multiple">  
  34.              value="苹果">苹果  
  35.              value="雪梨">雪梨  
  36.              value="西瓜">西瓜  
  37.              value="荔枝">荔枝  
  38.              value="龙眼">龙眼  
  39.              value="香蕉">香蕉  
  40.           
  41.     
  
  •      id="div2">  
  •          type="button" value=">" class="btn" onclick="Add($('#dltSource'),$('#dltTarget'))" />  
  •          type="button" value=">>" class="btn" onclick="AddAll($('#dltSource'),$('#dltTarget'))" />  
  •          type="button" value="<" class="btn" onclick="Add($('#dltTarget'),$('#dltSource'))" />  
  •          type="button" value="<<" class="btn" onclick="AddAll($('#dltTarget'),$('#dltSource'))" />  
  •     
    •   
  •      id="div3">  
  •          id="dltTarget" name="dltTarget" size="10" multiple="multiple">  
  •           
  •     
    •   
  •   
  •   
  •   
  •   
  •  src="js/jquery.js" type="text/javascript">  
  •   
  •   
  •  type="text/javascript">  
  •     /* 添加选择的项 */   
  •     function Add(ObjSource, ObjTarget) {   
  •        if(ObjSource.val() ==null) return;    // 如果没有选择则退出函数，无这句话的话IE6会报错   
  •         $.each(ObjSource.val(), function(i, n) {    // 循环原列表中选中的值，依次添加到目标列表中   
  •             var html = " + n + "'>" + n + "";   
  •             ObjTarget.append(html);   
  •         });   
  •         ObjSource.find("option:selected").remove();  // 原列表中选中的值删除   
  •     }   
  •     /* 添加全部 */   
  •     function AddAll(ObjSource, ObjTarget) {   
  •         ObjTarget.append(ObjSource.html());  // 目标列表的HTML加上原列表的所有HTML   
  •         ObjSource.empty();  // 原列表清空   
  •     }   
  •   
    • jquery制作select列表双向选择｜牛博-牛腩的博客|www.niunan.org JQuery获取和设置Select选项方法 - Feiin的专栏 - CSDN博客 jQuery对select操作小结 - 鬼鬼DH - 博客园 Jquery 操作 Select checkbox radio jquery radio,checkbox,select操作 - Shenzhen Tou... http://www.5520.org/ 制作个性的文章列表 - 798DIY的日志 - 网易博客 如何制作个性的文章列表 - 無為居士的日志 - 网易博客 平面设计中常用的制作尺寸列表 | 如何制作个性的文章列表 如何制作个性的文章列表 jQuery学习: 实现select multiple左右添加和删除功能 - talang... jQuery学习: 实现select multiple左右添加和删除功能(好) 谓网 新文化 新世界 www.xinguo.org | xinguo.org jQuery选择器的基本常识 家常陈皮牛腩的做法 西红柿炖牛腩的做法 红酒焖牛腩的做法 读书报告：解读《关于费尔巴 http://www.worldvalue.org哈的提纲》 爆笑：老师气吐血的课堂回嘴实录(转载-www.xasy.org) 腾讯QQ的真实内幕 - 华夏黑客同盟 - http://www.77169.org 让男人流泪的文章文章转自[欣赏雨季] http://www.puresky.org 让男人流泪的文章文章转自[欣赏雨季] http://www.puresky.org 女人要学会聪明的引诱文章转自[欣赏雨季] http://www.puresky.org