Home > Web Front-end > JS Tutorial > body text

Implementing linkage display of data in drop-down boxes based on Ajax

亚连
Release: 2018-05-25 09:57:49
Original
1794 people have browsed it

This article will introduce to you how to realize the linkage display of data in drop-down boxes based on ajax. The code is very simple. Friends who need it can refer to it

When the company is doing projects, it needs to use the function of linkage display of data in drop-down boxes. , simply use Ajax to implement it. Seeing that I had plenty of time, I didn’t go to the demo to think of a way to write it myself. It's just my own thoughts, some may be mentally retarded, I hope you won't make me laugh.

Two drop-down list boxes in the page:

<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>
Copy after login

##JS script code:

<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!=&#39;0&#39;)
  {
    var speciality = document.getElementById("specialty");
    speciality.disabled=false;
    var url="Handler.ashx?type=college&id="+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;i<classList.length;i++)
            //将取得的结果添加到下级的列表框中
        {
          var tmp=classList[i].split(",");
          f.add(new Option(tmp[1],tmp[0]));
        }
      }
      else
      {
        alert("您所请求的页面有异常。");
      }
  }
}  
</script>
Copy after login

We send the http request to Handler.ashx on the server for processing.

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;
    }
  }
}
Copy after login

Obtain the corresponding major according to the college number, and separate the name of the major with "|" to form a string and return it to the client, client script Split string added to dropdown box.

This is only the second-level linkage display, and the actual principle of the third-level linkage data is the same.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of ajax synchronization and asynchronousness in jquery

Ajax asynchronous upload in jquery

How JQuery ajax returns JSON

##

The above is the detailed content of Implementing linkage display of data in drop-down boxes based on Ajax. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template