ajax 三級聯動

來源:互聯網
上載者:User

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

 
           <input id="Button1" type="button" value="button" onclick="SearchProductByName()"/></div>
    </form>
</body>
</html>

 

 

 

 

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

                         }

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.