如何实现无刷新的DropdownList联动效果

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

huanglenzhi
推荐于2016-02-01 · 知道合伙人数码行家

huanglenzhi
知道合伙人数码行家

采纳数：117538 获赞数：517193

长期从事计算机组装，维护，网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。

向TA提问私信TA

关注

展开全部

　　1.引用ajax.dll

　　2.Web.config

　　<httpHandlers>
　　<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
　　</httpHandlers>

　　3.创建类ajaxMethod.cs，代码如下：

　　using System;
　　using System.Collections.Generic;
　　using System.Linq;
　　using System.Web;
　　using System.Data.SqlClient;
　　using System.Data;

　　namespace WebApplication1
　　{
　　public class ajaxMethod
　　{

　　#region GetPovinceList
　　public static DataSet GetPovinceList()
　　{
　　string sql = "select * from province";
　　return GetDataSet(sql);
　　}
　　#endregion

　　#region GetCityList
　　[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
　　public DataSet GetCityList(int povinceid)
　　{
　　string sql = "select * from city where proID='" + povinceid + "'";
　　return GetDataSet(sql);
　　}
　　#endregion

　　#region GetDataSet
　　public static DataSet GetDataSet(string sql)
　　{
　　SqlConnection ConnectionString = new SqlConnection("Data Source=.;database=Area;Integrated Security=True");
　　SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
　　DataSet ds = new DataSet();
　　sda.Fill(ds);
　　return ds;
　　}
　　#endregion

　　}
　　}

　　

　　4.创建主页面Sample.aspx

　　前台：

　　<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="WebApplication1.Sample" %>

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http：//www。w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml" >
　　<head>
　　<title>实现DropDownList无刷新联动</title>
　　</head>
　　<body>
　　<script language="javascript" type="text/javascript">
　　function cityResult() {
　　var city = document.getElementById("DropDownList1");
　　ajaxMethod.GetCityList(city.value, get_city_Result_CallBack);
　　}
　　function get_city_Result_CallBack(response) {
　　if (response.value != null) {
　　document.all("DropDownList2").length = 0;
　　var ds = response.value;
　　document.all("DropDownList2").options.add(new Option("--请选择--", -1));
　　if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
　　for (var i = 0; i < ds.Tables[0].Rows.length; i++) {
　　var name = ds.Tables[0].Rows[i].cityName;
　　var id = ds.Tables[0].Rows[i].cityID;
　　document.all("DropDownList2").options.add(new Option(name, id));
　　}
　　}
　　}
　　return
　　}
　　</script>
　　<form id="form1" runat="server" method="post">
　　省份：<asp:DropDownList ID="DropDownList1" runat="server"  Width="100px">
　　</asp:DropDownList><br />
　　城市：<asp:DropDownList ID="DropDownList2" runat="server"  Width="100px">
　　</asp:DropDownList>
　　</form>
　　</body>

　　</html>

　　

　　后台：

　　using System;
　　using System.Collections.Generic;
　　using System.Linq;
　　using System.Web;
　　using System.Web.UI;
　　using System.Web.UI.WebControls;
　　using System.Data.SqlClient;
　　using System.Data.Odbc;
　　using System.Data;

　　namespace WebApplication1
　　{
　　public partial class Sample : System.Web.UI.Page
　　{
　　protected void Page_Load(object sender, EventArgs e)
　　{
　　Ajax.Utility.RegisterTypeForAjax(typeof(ajaxMethod));
　　if (!Page.IsPostBack)
　　{
　　this.DropDownList1.DataSource = ajaxMethod.GetPovinceList();
　　this.DropDownList1.DataTextField = "proName";
　　this.DropDownList1.DataValueField = "proID";
　　this.DropDownList1.DataBind();

　　DropDownList1.Items.Insert(0, new ListItem("--请选择--"));
　　DropDownList2.Items.Insert(0, new ListItem("--请选择--"));
　　
　　this.DropDownList1.Attributes.Add("onclick", "cityResult();");
　　}
　　}
　　}
　　}
转载


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何实现无刷新的DropdownList联动效果

其他类似问题

为你推荐：