Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-05-25 09:57:49
Original
1794 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;
    }
  }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage