有个空间

有个标题

多选框左右移 select multiple="multiple" 超时loop

背景
在项目中用到用到了多选框的左右移,其中碰到一些问题,记录下。

下面这是页面内容


页面代码如下
 1 <select multiple="multiple" name=idNoSelectedCode id="idNoSelectedCode" size=10 style="FONT-FAMILY: courier new; FONT-SIZE: 13px; font-weight: bold;width=100%">
 2                 <logic:present name="equipmentList" scope="session">
 3                     <logic:iterate id="rs" name="equipmentList" indexId="varId">
 4                         <option value="<%= varId%>">${rs.eqid}</option>         
<!--这里当时value设的值也是
${rs.eqid},如果有重复的话就会出现问题,所以改成用不会重复的varId-->
 5                     </logic:iterate>
 6                 </logic:present>
 7                 <logic:notPresent name="equipmentList" scope="session">
 8                     <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
 9                 </logic:notPresent>
10             </select>
11             </td>
12             <td width="10%" class="formFieldInput" align="center">
13                 <table><tr><td><input type=button value="->>" onclick="javascript:moveAll('idNoSelectedCode','idSelectedCode');" style="FONT-FAMILY: courier new; FONT-SIZE: 12px">
14                 </td></tr><tr><td><input type=button value="-->" onclick="javascript:srcToDest('idNoSelectedCode','idSelectedCode');" style="FONT-FAMILY: courier new; FONT-SIZE: 12px">
15                 </td></tr><tr><td><input type=button value="<--" onclick="javascript:srcToDest('idSelectedCode','idNoSelectedCode');" style="FONT-FAMILY: courier new; FONT-SIZE: 12px">
16                 </td></tr><tr><td><input type=button value="<<-" onclick="javascript:moveAll('idSelectedCode','idNoSelectedCode');" style="FONT-FAMILY: courier new; FONT-SIZE: 12px">
17                 </td></tr></table>
18             </td>
19             <td width="35%">
20             <select multiple="multiple" name=idSelectedCode id="idSelectedCode" size=10 style="FONT-FAMILY: courier new; FONT-SIZE: 13px; font-weight: bold;width=100%">
21             
22             </select>

实现
关键是几个javascript 函数的实现。
 1 function moveAll(srcid,destid)
 2     {
 3         var optionsObjects=document.getElementById(srcid);
 4         for(var o=0;o<optionsObjects.length;o++)
 5         {
 6             optionsObjects.options[o].selected=true;
 7         }
 8         srcToDest(srcid,destid);
 9     }    
10     function srcToDest(srcid,destid)  
11     {  
12          var optionsObjects=document.getElementById(srcid);
13         var optionsSubObjects=document.getElementById(destid);
14                 
15         for(var o=0;o<optionsObjects.length;o++)
16          {
17              if(optionsObjects.options[o].selected==true)
18               {
19                  var optionsvalue=optionsObjects.options[o].value;
20                  var optionstext=optionsObjects.options[o].text;
21                  addoptions(srcid,destid,optionstext,optionsvalue);
22                  o = o- 1;                                                                                
                      //这里是发生死循环的主要原因,如果没有重复数据,这里源框会移走一条数据,所以o要减1。
                     //但是当有重复数据时不会移走,导致o-1,下个循环再+1,还是自己本身,死循环发生鸟。

23               }
24          }
25      }
26      
27     function addoptions(srcid,destid,optionstext,optionsvalue)
28      {
29          var optionsObjects=document.getElementById(srcid);
30          var optionsSubObjects=document.getElementById(destid);
31          var hasexist=0;
32          for(var o=0;o<optionsSubObjects.length;o++)
33          {
34               var optionsvalue_sub=optionsSubObjects.options[o].value;
35               if(optionsvalue_sub==optionsvalue)                                 //判断在目标框中是否存在这个值,这里用select的value才不会出现重复的情况。
36                   hasexist+=1;
37          }
38          if(hasexist==0)
39          {
40               optionsSubObjects.add(new Option(optionstext,optionsvalue));
41               for(var o=0;o<optionsObjects.length;o++)
42              {
43                   var optionsvalue_src=optionsObjects.options[o].value;
44                   if(optionsvalue_src==optionsvalue)                            //判断在源框中是否存在这个值,这里也必须用select的value。
45                    optionsObjects.options.remove(o);
46              }
47          }
48      }

下面是要取出目标框中我们移过去的值
1 var optionsObjects=document.getElementById("idSelectedCode");
2 
3 for(var o=0;o<optionsObjects.length;o++)
4         {
5             var optionstext=optionsObjects.options[o].text;              //这里用text,因为value并不是我们需要的。
6             equipItemList +=optionstext+";";
7         }

这个equipItemList 就是用分号拼接出来的值,下面是蒸是炒是炸就看你的了。

问题:
一开始的时候我都是用text去比较,结果text的值不可靠,出现重复的情况。然后导致IE弹出”Stop running this script“
,一个运行缓慢的警告框。当时是以为数据太多的原因,后来发现是因为有重复的值导致死循环计算,IE自己弹出运行缓慢的警告。



posted on 2010-12-08 11:07 游雯 阅读(539) 评论(0)  编辑  收藏 所属分类: Java编程技巧


只有注册用户登录后才能发表评论。


网站导航: