本篇文章给大家介绍基于ajax实现下拉框联动显示数据，代码非常简单，需要的朋友可以参考下
公司做项目的时候，需要用到下拉框联动显示数据的功能，索性利用Ajax来实现，看到时间比较充裕，就没去找demo自己去想方法写了。纯自己的想法，有些可能比较弱智，希望不要见笑。
页面中的两个下拉列表框：
<tr> <td style="width: 130px"> 所在学院：</td><td style="width: 100px"> --请选择所在学院学院-- </td></tr><tr> <td style="width: 130px"> 所在专业：</td><td style="width: 100px"> --请选择所在专业-- </td></tr>
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 查询出来的。学<a style="color:transparent">来源gao($daima.com搞@代@#码网</a>院的名字和主键，主键以便去查专业的名字 } } 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; } } }
根据学院的编号获得相应的专业，并将专业的名称用“|”分割组合成字符串返回给客户端，客户端脚本拆分字符串添加到下拉框中。
这里只是二级的联动显示，三级联动数据的现实原理是一样的。
本文的全部内容就到此结束了，希望大家学习Ajax实现下拉框联动显示数据有所帮助。
以上就是基于Ajax实现下拉框联动显示数据的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：基于Ajax实现下拉框联动显示数据
转载请注明原文链接：基于Ajax实现下拉框联动显示数据
