两个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、火狐