ajax 三級聯動

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
      <script language="javascript" type="text/javascript">
          var request;
          var OptionsName;
          iniOptions();

          //初始化第一個列表框
          function iniOptions() {
              OptionsName = "op1";
              getNextOptions("", ""); //初始化第一個列表框
          }

          //建立求XMLHttpRequest對象
          function createRequest() {
              try {
                  request = new XMLHttpRequest();
              } catch (trymicrosoft) {
                  try {
                      request = new ActiveXObject("Msxml2.XMLHTTP");
                  } catch (othermicrosoft) {
                      try {
                          request = new ActiveXObject("Microsoft.XMLHTTP");
                      } catch (failed) {
                          request = false;
                      }
                  }
              }
              if (!request)
                  alert("error , your browerser can can create XMLHttpRequest!");
          }

          //發送請求，擷取下一個列表框的列表資料
          //參數oValue為當前列表框的選中值，此值作為下一個列表框的parentID號
          function getNextOptions(oValue, rootType) {
              createRequest();
              var url = "SelectHander.aspx?parentid=" + oValue + "&rootType=" + rootType;
              request.open("GET", url, true);
              request.onreadystatechange = opcallback;
              request.send(null);
          }

          //回呼函數
          function opcallback() {
              if (request.readyState == 4) {
                  if (request.status == 200) {
                      var response = request.responseText; //擷取伺服器返回的JSON字串
                      addOptions(response); //添加option選項
                      //document.getElementById("demo").innerHTML=response
                  } else
                      alert("status is " + request.status);
              }
          }

          //添加option選項
          function addOptions(str) {
              var jsonObj = str; // JSON字串轉JSON對象
              var opObj = document.getElementById(OptionsName);
              clearlaterOP();
              var s = jsonObj.split("|")

              if (s.length > 1) opObj.disabled = false;

              for (i = 0; i < s.length; i++) {
                  jj = s[i];
                  kk = jj.split(":");
                  var TemOption = new Option(kk[0], kk[1]); //定義一個選項對象
                  //if (i==0) TemOption.selected = "selected"; //設定第一項為被選項
                  opObj[opObj.length] = TemOption; //添加到列表
              }

}

          //清除所有當前及後繼option的列表內容
          function clearlaterOP() {
              var obj = document.getElementById(OptionsName)
              var nOp = Number(obj.id.substr(obj.id.length - 1, 1));
              for (i = nOp; i <= 3; i++) {
                  var opTemp = document.getElementById("op" + i);
                  opTemp.length = 1;
              }
          }

          //option的onchange事件
          function OpSelectChange(obj, rootType) {
              obj.value = obj.options[obj.selectedIndex].value;
              OptionsName = "op" + (Number(obj.id.substr(obj.id.length - 1, 1)) + 1); //自動確定下一option的id號，為添加選項作準備
              getNextOptions(obj.value, rootType);
          }

          //尋找產品
          function SearchProductByName() {
              var obj = document.getElementById("op3");
              var queryValue = obj.options[obj.selectedIndex].value;       //產品pageurl
              alert(queryValue);
              window.location.href = "\""+queryValue+"\"";
          }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
           <div id="demo">
    </div>
   <select name="op1" id="op1" onchange="OpSelectChange(this,'A')" style="width:100px;">
   <option>Select Catalog</option>
    </select>
    <select name="op2" id="op2" onchange="OpSelectChange(this,'B')" style="width:100px;" disabled="disabled">
<option>Select Subcatalog</option>
    </select>
    <select name="op3" id="op3" style="width:100px;" disabled="disabled">
<option>Select Product</option>
    </select>

if (Request.QueryString["parentid"] != null && Request.QueryString["rootType"]!=null)
                         {
                             string rootId=Request.QueryString["parentid"].ToString().Trim();
                             string rootType = Request.QueryString["rootType"].ToString().Trim();

                             if (rootId == ""&&rootType=="") //when loaded
                             {
                                 Response.Write("a:1|aa:2|aaa:3");
                             }
                             else if (rootId.Trim() != "" && rootType=="A") //when big catalog select
                             {
                                 Response.Write("b:1|bb:2|bb:3");
                             }
                             else if (rootId.Trim() != "" && rootType == "B") ///when sub catalog select
                             {
                                 Response.Write("c:1|cc:2|cc:3");
                             }

}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More