两个listbox 无刷新互动
页面代码：
1 <table border="0" cellpadding="0" cellspacing="0" style="width: 32%"> 2 <tr> 3 <td> 4 <asp:ListBox ID="lbLeft" runat="server" Width="150px" Height="200" DataTextField="Name" DataValueField="ID" SelectionMode="Multiple"></asp:ListBox> 5 </td> 6 <td><input id="btnAll" onclick="SelectAll()" type="button" class="C_input02" value=">>" /> 7 <br /><br /> 8 <input id="btnAdd" onclick="SelectOne()" type="button" class="C_input02" value=">" /><br /><br /> 9 <input id="btnDel" onclick="DelOne()" type="button" class="C_input02" value="<" /><br /><br /> 10 <input id="btnDAll" onclick="DelAll()" type="button" class="C_input02" value="<<" /> 11 </td> 12 <td> 13 <asp:ListBox ID="lbRight" runat="server" Width="150px" SelectionMode="Multiple" Height="200"></asp:ListBox> 14 </td> 15 </tr> 16 </table> 17 <input id="txtProvider" runat="server" style="display:none" />
javascript代码：
1 <script type="text/javascript"> 2 function SelectAll() 3 { 4 var lst1=window.document.getElementByIdx_x_x_x("<%=lbLeft.ClientID %>"); 5 var length = lst1.options.length; 6 var string = window.document.getElementByIdx_x_x_x("<%=txtProvider.ClientID %>") 7 for(var i=0;i<length;i++) 8 { 9 var v = lst1.options[i].value; 10 var t = lst1.options[i].text; 11 var lst2=window.document.getElementByIdx_x_x_x("<%=lbRight.ClientID %>"); 12 lst2.options[i] = new Option(t,v,true,true); 13 string.value+=v+","; 14 } 15 } 16 17 function DelAll() 18 { 19 var lst2=window.document.getElementByIdx_x_x_x("<%=lbRight.ClientID %>"); 20 var string = window.document.getElementByIdx_x_x_x("<%=txtProvider.ClientID %>") 21 var length = lst2.options.length; 22 for(var i=length;i>0;i--) 23 { 24 lst2.options[i-1].parentNode.removeChild(lst2.options[i-1]); 25 } 26 string.value = ""; 27 } 28 29 function SelectOne() 30 { 31 var string = window.document.getElementByIdx_x_x_x("<%=txtProvider.ClientID %>") 32 var lst1=window.document.getElementByIdx_x_x_x("<%=lbLeft.ClientID %>"); 33 var lst2=window.document.getElementByIdx_x_x_x("<%=lbRight.ClientID %>"); 34 var lstindex=lst1.selectedIndex; 35 var length = lst2.options.length; 36 var isExists = false; 37 if(lstindex<0) 38 return; 39 else if(length != null) 40 { 41 for(var i=0;i < length; i++) 42 { 43 if(lst2.options[i].text == lst1[lstindex].text&&lst2.options[i].value == lst1[lstindex].value) 44 { 45 isExists = true; 46 } 47 } 48 } 49 else 50 { 51 return; 52 } 53 if (isExists == false) 54 { 55 var v = lst1.options[lstindex].value; 56 var t = lst1.options[lstindex].text; 57 lst2.options[lst2.options.length] = new Option(t,v,true,true); 58 string.value+=v+","; 59 } 60 else 61 { 62 alert("所选条目数据已经存在"); 63 return false; 64 } 65 } 66 67 function DelOne() 68 { 69 var lst2=window.document.getElementByIdx_x_x_x("<%=lbRight.ClientID %>"); 70 var string = window.document.getElementByIdx_x_x_x("<%=txtProvider.ClientID %>") 71 var lstindex=lst2.selectedIndex; 72 if(lstindex>=0) 73 { 74 var v = lst2.options[lstindex].value+";"; 75 var va = lst2.options[lstindex].value+","; 76 lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]); 77 string.value = string.value.replace(va,""); 78 } 79 } 80 </script>
兼容IE、火狐
