Implementierung der Verknüpfungsanzeige von Daten in Dropdown-Boxen basierend auf Ajax

In diesem Artikel erfahren Sie, wie Sie die verknüpfte Anzeige von Daten in Dropdown-Feldern auf Ajax-Basis realisieren. Freunde, die ihn benötigen, können darauf zurückgreifen.

Wenn das Unternehmen dies tut Bei Projekten muss die Funktion zur Verknüpfung von Daten in Dropdown-Feldern verwendet werden. Da ich viel Zeit hatte, habe ich mir keine Möglichkeit zum Schreiben ausgedacht es selbst. Es sind nur meine eigenen Gedanken, einige sind möglicherweise geistig zurückgeblieben. Ich hoffe, Sie bringen mich nicht zum Lachen.

Zwei Dropdown-Listenfelder auf der Seite:

<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-Skriptcode:

<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>

Wir senden die http-Anfrage zur Verarbeitung an Handler.ashx auf der Serverseite.

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;
    }
  }
}

Besorgen Sie sich das entsprechende Hauptfach entsprechend der Hochschulnummer, trennen Sie den Namen des Hauptfachs mit „|“, um eine Zeichenfolge zu bilden, und geben Sie sie an den Client zurück , Client-Skript-Split-String zum Dropdown-Feld hinzugefügt.

Dies ist nur die Verknüpfungsanzeige der zweiten Ebene. Das eigentliche Prinzip der Verknüpfungsdaten der dritten Ebene ist dasselbe.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ausführliche Erklärung der Ajax-Synchronisation und Asynchronität in JQuery

Ajax-Asynchron-Upload in JQuery

Wie JQuery Ajax JSON zurückgibt

Das obige ist der detaillierte Inhalt vonImplementierung der Verknüpfungsanzeige von Daten in Dropdown-Boxen basierend auf Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!