Realization of _ajax correlation of drop-down frame linkage display data based on Ajax

When the company does the project, need to use the dropdown box linkage display data function, simply use AJAX to achieve, see more abundant time, did not go to find a demo of their own way to write. Pure own ideas, some may be more retarded, I hope not laughed at.

Two Drop-down list boxes in the page:

<tr>
        <td style= "width:130px" >
          Institute:</td>
        <TD style= "width:100px" >
          < Select Id= "College" style= "width:200px" runat= "Server" onchange= "Changcollege (this.value)" >
            <option Value = "0" >-
              -Please choose the College College-
            -
          </option> </select></td>
      </tr>
      <tr>
        <td style= "width:130px" >
          professional:</td>
        <td style= "width:100px" >
          <select ID = "Specialty" style= "width:200px" runat= "Server" onchange= "savespecical (this.value)" >
            <option value= "0" >--
              Please choose your Major--
            </option>
          </select></td>
      </tr>

JS Script code:

<script type= "Text/javascript" > var http_request = false;
  function Send_request (method,url,content,responsetype,callback)//defines the functions that send the request {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 ("Create XMLHttpRequest object Failed");
  return false;
  } if (responsetype.tolowercase () = = "Text") {http_request.onreadystatechange=callback;
    else {window.alert ("ERR");
  return false;
  The 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)///When the college Drop-down list changes, the script event that triggers {if (va!= ' 0 ') {var speciality = document.getElementById ("Special
    Ty ");
    Speciality.disabled=false;
    var url= "handler.ashx?type=college&id=" +VA;
  Send_request ("Get", Url,null, "text", POPULATECLASS3);
  {var F=document.getelementbyid (' specialty ')//ajax the successful callback function POPULATECLASS3 ()} function
        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++)///To add results to the subordinate list box {var tmp=classlist[i].split (",");
        F.add (New Option (tmp[1],tmp[0)); } else {alert ("the page you requested has an exception.)
      "); }} </script>

We send HTTP requests to the service-side handler.ashx 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));//This is from the database according to the provincial ID query. The name and primary key of the college, the primary key in order to check the professional name} public string Getspecialty (String college) {DataSet ds = Getinformation.getspecial
    Tyinfo (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; }
  }
}

According to the number of the college to obtain the corresponding professional, and the name of the professional "|" The split combination is returned to the client, and the client script split string is added to the Drop-down box.

Here is only two-level linkage shows that the three-level linkage data is the same reality principle.

This article is the end of the entire content, I hope you learn Ajax implementation of the Drop-down box linkage display data help.