码迷,mamicode.com
首页 > Web开发 > 详细

jquery 操作listbox 左右相互选择

时间:2016-02-23 09:41:20      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

技术分享实现左右两个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>

 

jquery 操作listbox 左右相互选择

标签:

原文地址:http://www.cnblogs.com/AnXinliang/p/5208771.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!