用AjaxPro来完成二级连动

最新推荐文章于 2025-06-07 19:24:53 发布

原创最新推荐文章于 2025-06-07 19:24:53 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#server #database #cmd #string #asp #function

asp.net 专栏收录该内容

109 篇文章

订阅专栏

本文介绍了一种利用AjaxPro实现网页中二级联动选择框的方法。通过前后端交互，动态加载不同级别的分类数据，实现省市区等多级联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在在实现二级连动或是三级连动方面，都是采用ajax来完成的。网上的例子也很多。我采用的是AjaxPro来完的。如何配置AjaxPro我就不说了。直接说下程序。数据库表二个主表C_BigClass 从表C_SmallClass C_BigClass字段 C_SmallClass字段 id id BigClass SmallClass BigClassid 前台页面 ddlTwo.aspx

<script type="text/javascript">

       function ShowCity(id)

       {

          var result = chen.getCityList(id).value;

          var ddlcity = document.getElementById("ddlCity");

          ddlcity.length=0;

          for(var i=0;i<result.Rows.length;i++)

          {

             ddlcity.options.add(new Option(result.Rows[i].SmallClass,result.Rows[i].id));

          }

       }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <p>

        省份：<asp:DropDownList ID="ddlPro" runat="server">

        </asp:DropDownList>

   市区：<asp:DropDownList ID="ddlCity" runat="server">

        </asp:DropDownList>

    </p>

    <div>

    

    </div>

    </form>

</body>

后台：ddlTwo.aspx.cs

[AjaxPro.AjaxNamespace("chen")]

    public partial class ddlTwo : System.Web.UI.Page

    {



        protected void Page_Load(object sender, EventArgs e)

        {

            AjaxPro.Utility.RegisterTypeForAjax(typeof(ddlTwo));



            SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=chen123;database=C_News;");

            conn.Open();

            SqlCommand cmd = new SqlCommand("", conn);

            string strsql = "select * from C_BigClass";

            cmd.CommandText = strsql;

            SqlDataAdapter da = new SqlDataAdapter();

            da.SelectCommand = cmd;

            DataTable dt = new DataTable();

            da.Fill(dt);



            this.ddlPro.DataSource = dt;

            this.ddlPro.DataValueField = "id";

            this.ddlPro.DataTextField = "BigClass";

            this.ddlPro.DataBind();



            this.ddlPro.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)";



            conn.Close();

        }



        [AjaxPro.AjaxMethod]

        public DataTable getCityList(int id)

        {

            Hashtable ht = new Hashtable();



            SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=chen123;database=C_News;");

            conn.Open();

            SqlCommand cmd = new SqlCommand("", conn);

            string strsql = "select * from C_SmallClass where BigClassid="+id+"";

            cmd.CommandText = strsql;

            SqlDataAdapter da = new SqlDataAdapter();

            da.SelectCommand = cmd;

            DataTable dt = new DataTable();

            da.Fill(dt);



            return dt;

        }

    }



如果我们要进行三级或四级连动，其实很简单，只要在Page_load下面
this.ddlPro.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)";的下面为每个下拉框
都加一个方法就行了。只不过多写几个public DataTable getCityList(int id)的程序。