zoukankan      html  css  js  c++  java
  • asp.net无刷新三级联动

    无刷新三级联动,这个在网上有很多,方法也很好。但是有一点比较特别的就是我的这个,是因为单位已经建立好了数据库,你得在这个上面进行添加。所以很麻烦啊。在网上也找了一些,可是大多数数据库都不一样,有一些是用vs2005和ajaxpro做的,可是我单位使用的是vs2003没有法子,只能找一些可以用了。这里要感谢的是 Eric 它在baidu的BLOG里的方法不错,我基本是采用它的方法来做的,只不过这里做了一些改动。
         首先是。ThreeDDL.aspx页面,我把程序全写上来,
     <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
       
             <script language="javascript">
         <!--
          function SelectProvince()
          {
             var drp2=document.getElementById("DropDownList2");//市县一级
             var drp3=document.getElementById("DropDownList3");//区一级
             for (var i=drp2.options.length;i>=0;i--)
             {
                 drp2.remove(i);
             }
             for (var i=drp3.options.length;i>=0;i--)
             {
                 drp3.remove(i);
             }
             var oHttpReq=new ActiveXObject("MSXML2.XMLHTTP");
             var oDoc=new ActiveXObject("MSXML2.DOMDocument");
             var province=document.getElementById("DropDownList1").value;
             oHttpReq.open("post","selectarea.aspx?flag=1&province="+province,false);
             oHttpReq.setrequestheader("content-type","application/x-www-form-urlencoded");
             oHttpReq.send("");                 
             var result=oHttpReq.responseText;
             var newOption_0 = document.createElement("OPTION");
             newOption_0.text = "-请选择-";
             newOption_0.value = '-1';
             drp2.options.add(newOption_0);
             oDoc.loadXML(result);
            //这里要说一下,items1和items2是你在后面程序中得到的一个xml表。对于//NewDataSet/city/name是怎么来的,你可以用alert(result);看一下就行
        items1 = oDoc.selectNodes("//NewDataSet/city/name");
            items2 = oDoc.selectNodes("//NewDataSet/city/sz_code");

            var itemsLength=items1.length;
     
        for(i=0;i<itemsLength;i++)

    //将小类的类名和编号赋予DropDownList2
        {
        var newOption = document.createElement("OPTION");
        newOption.text=items1[i].text;
        newOption.value=items2[i].text;
        drp2.options.add(newOption);
        }
        }
      
      
         function SelectCity()
          {
             var drp3=document.getElementById("DropDownList3");
             for (var i=drp3.options.length;i>=0;i--)
             {
                 drp3.remove(i);
             }
           
             var oHttpReq=new ActiveXObject("MSXML2.XMLHTTP");
             var oDoc=new ActiveXObject("MSXML2.DOMDocument");
             var city=document.getElementById("DropDownList2").value;
             oHttpReq.open("post","selectarea.aspx?flag=2&city="+city,false);
             oHttpReq.setrequestheader("content-type","application/x-www-form-urlencoded");
             oHttpReq.send("");                 
             var result=oHttpReq.responseText;
             var newOption_0 = document.createElement("OPTION");
             newOption_0.text = "-请选择-";
             newOption_0.value = '-1';
             drp3.options.add(newOption_0);
             oDoc.loadXML(result);
             var items = oDoc.selectNodes("//NewDataSet/area");
        for (var item = items.nextNode();item;item = items.nextNode())
        { 
         
         var areaName = item.selectSingleNode("name").nodeTypedValue;
         var areaCode = item.selectSingleNode("sz_code").nodeTypedValue;
          var newOption = document.createElement("OPTION"); 
         newOption.text = areaName; 
         newOption.value = areaCode; 
         drp3.options.add(newOption); 
        } 
        }
      
      
    -->
         </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
            <asp:DropDownList ID="DropDownList2" runat="server">
            </asp:DropDownList>
            <asp:DropDownList ID="DropDownList3" runat="server">
            </asp:DropDownList></div>
        </form>
    </body>
    </html>
    下面是ThreeDDl.aspx.cs的代码
    protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection conn = new SqlConnection("Data Source=CG;Initial Catalog=area;User ID=sa;Password=chen123");

            SqlDataAdapter da = new SqlDataAdapter("select * from area where right(sz_code,4)='0000'",conn);
            DataSet ds = new DataSet();

            da.Fill(ds, "Province");
            this.DropDownList1.DataSource = ds.Tables["Province"];
            this.DropDownList1.DataTextField = "name";
            this.DropDownList1.DataValueField = "sz_code";
            this.DropDownList1.DataBind();

            this.DropDownList1.Attributes.Add("onchange", "SelectProvince()");
            this.DropDownList2.Attributes.Add("onchange", "SelectCity()");
        }

    selectarea.aspx这个页面上面没有什么东西,只有在其selectarea.aspx.cs中才有代码,在下面
    using System;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Xml;

    public partial class selectarea : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection conn = new SqlConnection("Data Source=CG;Initial Catalog=area;User ID=sa;Password=chen123");
            int flag = Convert.ToInt32(Request.QueryString["flag"].ToString());
            if (Request.QueryString["flag"] != null || Request.QueryString["flag"].ToString() != "")
            {
                switch(flag)
                {
                    case 1:

                        string strprv = Request.QueryString["province"].ToString();
                        SqlDataAdapter da = new SqlDataAdapter("select * from area where left(sz_code,2)='" + strprv.Substring(0, 2).ToString() + "' and right(sz_code,2)='00' and right(sz_code,4)<>'0000'", conn);
                        DataSet ds = new DataSet();

                        da.Fill(ds,"city");
                        XmlTextWriter writerCity = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
                        writerCity.Formatting = Formatting.Indented;
                        writerCity.Indentation = 4;
                        writerCity.IndentChar = ' ';
                        ds.WriteXml(writerCity);
                        writerCity.Flush();
                        Response.End();
                        writerCity.Close();
                        break;
                    case 2:
                        string strcity = Request.QueryString["city"].ToString();
                        SqlDataAdapter da1 = new SqlDataAdapter("select * from area where left(sz_code,4)='" + strcity.Substring(0, 4).ToString() + "' and right(sz_code,2)<>'00'", conn);
                        DataSet ds1 = new DataSet();

                        da1.Fill(ds1, "area");
                        XmlTextWriter writerCity1 = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
                        writerCity1.Formatting = Formatting.Indented;
                        writerCity1.Indentation = 4;
                        writerCity1.IndentChar = ' ';
                        ds1.WriteXml(writerCity1);
                        writerCity1.Flush();
                        Response.End();
                        writerCity1.Close();
                        break;
               }
            }
        }
    }

    这里我把数据库的大概情况给大家发一下,如果想要数据库ftp://down:down@ftp.netc.hutc.zj.cn/city.rar这个是Eric朋友提供的下载我不知道能用多长时间,我单位的数据库与它差不多,因为我无法提供我的数据库,所以以上代码全是根据它的数据库格式写的。
    表名area
    id          name         Rome          sz_code        zm_code
    1           北京         Beijing Shi    110000         BJ

    这里说一下,省一级的包括北京,天津这样的独立的市,sz_code全是前二位有数,后四位全是0000
    而下面一级的,市县一级的则是前二位与省级一样,中间二位不同,后二位是00
    而最后一级,区一级的,前二位与省级一样,中间与市级一样,最后二位是自己的号。

  • 相关阅读:
    【URAL1039】Anniversary Party
    【POJ2480】Longge's problem
    【POJ2478】Farey Sequence
    【HDU2157】How many ways??
    【NOI2012】随机数生成器
    【HDU3306】Another kind of Fibonacci
    【HDU2604】Queuing
    【HDU1757】A Simple Math Problem
    【HDU1575】Tr A
    【HDU1521】排列组合
  • 原文地址:https://www.cnblogs.com/ejiyuan/p/1029165.html
Copyright © 2011-2022 走看看