基于Ajax实现下拉框联动显示数据

来源：动视网责编：小采时间：2020-11-27 19:46:35

基于Ajax实现下拉框联动显示数据

基于Ajax实现下拉框联动显示数据:本篇文章给大家介绍基于ajax实现下拉框联动显示数据，代码非常简单，需要的朋友可以参考下公司做项目的时候，需要用到下拉框联动显示数据的功能，索性利用Ajax来实现，看到时间比较充裕，就没去找demo自己去想方法写了。纯自己的想法，有些可能比较弱智，希望

推荐度：

点击下载本文 文档为doc格式

导读基于Ajax实现下拉框联动显示数据:本篇文章给大家介绍基于ajax实现下拉框联动显示数据，代码非常简单，需要的朋友可以参考下公司做项目的时候，需要用到下拉框联动显示数据的功能，索性利用Ajax来实现，看到时间比较充裕，就没去找demo自己去想方法写了。纯自己的想法，有些可能比较弱智，希望

本篇文章给大家介绍基于ajax实现下拉框联动显示数据，代码非常简单，需要的朋友可以参考下

公司做项目的时候，需要用到下拉框联动显示数据的功能，索性利用Ajax来实现，看到时间比较充裕，就没去找demo自己去想方法写了。纯自己的想法，有些可能比较弱智，希望不要见笑。

页面中的两个下拉列表框：

JS脚本代码：

我们将http请求发送给服务端的Handler.ashx进行处理。

public class Handler : IHttpHandler 
{
 public void ProcessRequest(HttpContext context)
 {
 string type = context.Request.QueryString["type"];
 if (type.Equals("college"))
 {
 string id = context.Request.QueryString["id"];
 context.Response.ContentType = "text/plain";
 context.Response.Write(getSpecialty(id));//这个是从数据库中根据传来省的id 查询出来的。学院的名字和主键，主键以便去查专业的名字
 }
 }
 public string getSpecialty(string college)
 {
 DataSet ds = GetInformation.GetSpecialtyInfo(college);
 string str = "";
 for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
 {
 if (i == ds.Tables[0].Rows.Count - 1)
 {
 str += ds.Tables[0].Rows[i]["SpecialtyID"].ToString() + "," + ds.Tables[0].Rows[i]["SpecialtyName"].ToString();
 }
 else
 {
 str += ds.Tables[0].Rows[i]["SpecialtyID"].ToString() + "," + ds.Tables[0].Rows[i]["SpecialtyName"].ToString() + "|";
 }
 }
 return str.Trim();
 }
 public bool IsReusable {
 get {
 return false;
 }
 }
}

根据学院的编号获得相应的专业，并将专业的名称用“|”分割组合成字符串返回给客户端，客户端脚本拆分字符串添加到下拉框中。