当前位置:编程学习 > asp >>

两个Listbox或者DropdownList进行添加 移除 排序的例子

 直接上代码,拷贝直接运行即可:

ASPX 代码
<%@ Page Language="C#" EnableEventValidation="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

  protected void Button1_Click(object sender, EventArgs e)
  {
    Response.Write("<li>s1 = " + Request.Form[s1.UniqueID]);
    Response.Write("<li>s2 = " + Request.Form[s2.UniqueID]);
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
    var bak = null;
    function setData() {
      ss1 = document.getElementById("<%=s1.ClientID %>");
      ss2 = document.getElementById("<%=s2.ClientID %>");
      if (bak == null) {
        bak = [];
        for (i = 0; i < ss1.length; i++) bak.push(ss1[i].value);
      }

      for (i = ss1.length - 1; i > -1; i--) {
        if (ss1[i].selected) {
          ss2.options[ss2.options.length] = new Option(ss1[i].value, ss1[i].value);
          ss1[i].parentNode.removeChild(ss1[i]);
        }
      }
      SortSelect(ss1);
      SortSelect(ss2);
    }

    function removeData() {
      ss1 = document.getElementById("<%=s1.ClientID %>");
      ss2 = document.getElementById("<%=s2.ClientID %>");
      for (i = ss2.length - 1; i > -1; i--) {
        if (ss2[i].selected) {
          ss1.options[ss1.options.length] = new Option(ss2[i].value, ss2[i].value);
          ss2[i].parentNode.removeChild(ss2[i]);
        }
      }
      SortSelect(ss1);
      SortSelect(ss2);
    }

    function SortSelect(ss) {
      var tt = [];
      for (i = 0; i < bak.length; i++) {
        for (j = 0; j < ss.length; j++) {
          if (ss[j].value == bak[i]) tt.push(bak[i]);
        }
      }
      ss.length = 0;
      for (i = 0; i < tt.length; i++) {
        ss.options[ss.options.length] = new Option(tt[i], tt[i]);
      }
    }
  </script>
</head>
<body>
  <form runat="server" id="form1">
  <table>
    <tr>
      <td>
        <asp:ListBox ID="s1" runat="server" SelectionMode="Multiple" Rows="6">
          <asp:ListItem>A</asp:ListItem>
          <asp:ListItem>B</asp:ListItem>
          <asp:ListItem>C</asp:ListItem>
          <asp:ListItem>D</asp:ListItem>
        </asp:ListBox>
      </td>
      <td>
        <input onclick="setData()" type="button" value="->"/>
        <br />
        <input onclick="removeData()" type="button" value="<-" />
      </td>
      <td>
        <asp:ListBox ID="s2" runat="server" SelectionMode="Multiple" Rows="6"></asp:ListBox>
      </td>
    </tr>
  </table>
  <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="得到选中的" />
  </form>
</body>
</html>

补充:Web开发 , ASP.Net ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,