主页 > 知识库 > 基于Ajax实现下拉框联动显示数据

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

热门标签:老虎邮局地图标注点 襄阳外呼系统接口 科智联智能电销机器人 外呼系统获取客户手机号 上海浦东百度地图标注中心注册 百灵鸟 青海医疗智能外呼系统怎么样 目标三维地图标注 徐州电销卡外呼系统供应商

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

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

tr>
        td style="width: 130px">
          所在学院:/td>
        td style="width: 100px">
          select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)">
            option value="0">
              --请选择所在学院学院--
            /option>
          /select>/td>
      /tr>
      tr>
        td style="width: 130px">
          所在专业:/td>
        td style="width: 100px">
          select id="specialty" style="width: 200px" runat="server" onchange="SaveSpecical(this.value)">
            option value="0">
              --请选择所在专业--
            /option>
          /select>/td>
      /tr>

JS脚本代码:

script type="text/javascript">
var http_request = false;
function send_request(method,url,content,responseType,callback)//定义发送请求的函数
{
  http_request=false;
  if(window.XMLHttpRequest)
  {
    http_request=new XMLHttpRequest();
    if(http_request.overrideMimeType)
    {
      http_request.overrideMimeType("text/xml");
    }
  }
  else
  {
    try
    {
      http_request=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
      try
      {
        http_request=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e)
      {}
    }
  }
  if(!http_request)
  {
    window.alert("创建XMLHttpRequest对象失败");
    return false;
  }
  if(responseType.toLowerCase()=="text")
  {
    http_request.onreadystatechange=callback;
  }
  else
  {
    window.alert("ERR");
    return false;
  }
  if(method.toLowerCase()=="get")
  {
    http_request.open(method,url,true);
  }
  else if(method.toLowerCase()=="post")
  {
    http_request.open(method,url,true);
    http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  }
  else
  {
    window.alert("Err");
    return false;
  }
  http_request.send(content);
}
function changcollege(va)//当学院下拉列表发生改变时触发的脚本事件
{
  if(va!='0')
  {
    var speciality = document.getElementById("specialty");
    speciality.disabled=false;
    var url="Handler.ashx?type=collegeid="+va;
    send_request("GET",url,null,"text",populateClass3);
  }
}
function populateClass3()//Ajax执行成功的回调函数
{
  var f=document.getElementById("specialty");
  if(http_request.readyState==4)
  {
      if(http_request.status==200)
      {
        var list=http_request.responseText;
        var classList=list.split("|");
        f.options.length=1;
        for(var i=0;iclassList.length;i++)
            //将取得的结果添加到下级的列表框中
        {
          var tmp=classList[i].split(",");
          f.add(new Option(tmp[1],tmp[0]));
        }
      }
      else
      {
        alert("您所请求的页面有异常。");
      }
  }
}  
/script>

我们将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;
    }
  }
}

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

这里只是二级的联动显示,三级联动数据的现实原理是一样的。

本文的全部内容就到此结束了,希望大家学习Ajax实现下拉框联动显示数据有所帮助。

您可能感兴趣的文章:
  • ajax三级联动下拉菜单效果
  • AJAX省市区三级联动下拉菜单(java版)
  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
  • JavaScript Ajax Json实现上下级下拉框联动效果实例代码
  • AJAX解析XML实例之下拉框省、市二级联动
  • jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
  • ajax读取数据库内容实现二级联动下拉选择菜单示例
  • Ajax实现无刷新三联动下拉框
  • Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
  • Ajax+Servlet实现无刷新下拉联动效果

标签:辛集 揭阳 荆州 佛山 红河 咸宁 商洛 股票

巨人网络通讯声明:本文标题《基于Ajax实现下拉框联动显示数据》,本文关键词  基于,Ajax,实现,下拉,框,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《基于Ajax实现下拉框联动显示数据》相关的同类信息!
  • 本页收集关于基于Ajax实现下拉框联动显示数据的相关信息资讯供网民参考!
  • 推荐文章