背景:
在項目中用到用到了多選框的左右移,其中碰到一些問題,記錄下。
下面這是頁面內容
頁面代碼如下
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自己彈出運行緩慢的警告。