背景:
在项目中用到用到了多选框的左右移,其中碰到一些问题,记录下。
下面这是页面内容
页面代码如下
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=""> </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自己弹出运行缓慢的警告。