原創:ajax實現省市區三級連動

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

上載者：User

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>My First Ajax</TITLE>
</HEAD>

function ProLoad()
{

   createXMLHttpRequest();
   xmlHttp.OnReadyStateChange=HandleStateChange;
   xmlHttp.open("Get","area.xml",true);
   xmlHttp.send(null);

    }

   function CityLoad()
    {
   ProID=document.ajax.ProSelect.value;
   //alert(ProID);
         if (!xmlHttp)
         {
        xmlHttp.abort();
         }
   createXMLHttpRequest();
   xmlHttp.OnReadyStateChange=HandleStateChange2;
   xmlHttp.open("Get","area.xml",true);
   xmlHttp.send(null);

    }

   function AreaLoad()
    {
   CityID=document.ajax.CitySelect.value;
   //alert(CityID);

         if (!xmlHttp)
         {
        xmlHttp.abort();
         }
   createXMLHttpRequest();
   xmlHttp.OnReadyStateChange=HandleStateChange3;
   xmlHttp.open("Get","area.xml",true);
   xmlHttp.send(null);

    }

function HandleStateChange()
{
     if(xmlHttp.ReadyState==4)
     {
     if(xmlHttp.Status==200)
     {
        try
        {
           pro();
        }
        catch (exception)
        {
         alert("error");
        }

     }
     }

}

   function HandleStateChange2()
{
     if(xmlHttp.ReadyState==4)
     {
     if(xmlHttp.Status==200)
     {
        try
        {
           ProChagnge();
        }
        catch (exception)
        {
         alert("error");
        }

     }
     }

}

     function HandleStateChange3()
{
     if(xmlHttp.ReadyState==4)
     {
     if(xmlHttp.Status==200)
     {
        try
        {

            CityChagnge();
       //alert(CityID);
        }
        catch (exception)
        {
         alert("error");
        }

     }
     }

}

function pro()
{

      var select = document.getElementById("ProSelect");
   while (select.length > 0)
    {
             select.remove(0);
    }
     document.ajax.ProSelect.add(document.createElement("OPTION"));
  document.ajax.ProSelect.options[0].text="請選擇省份";
  document.ajax.ProSelect.options[0].value="請選擇省份";
     var xmlDoc=xmlHttp.responseXML;
     var proNode=xmlDoc.getElementsByTagName("province");
for(i=0;i<proNode.length;i++)
{
     //alert(proNode[i].getAttribute("name"))
  document.ajax.ProSelect.add(document.createElement("OPTION"));
  document.ajax.ProSelect.options[i+1].text=proNode[i].getAttribute("name");
  document.ajax.ProSelect.options[i+1].value=proNode[i].getAttribute("id");
}

}

function ProChagnge()
{
      var select = document.getElementById("CitySelect");
   while (select.length > 0)
    {
             select.remove(0);
    }
     document.ajax.CitySelect.add(document.createElement("OPTION"));
  document.ajax.CitySelect.options[0].text="請選擇城市";
  document.ajax.CitySelect.options[0].value="no";

     var select = document.getElementById("AreaSelect");
while (select.length > 0)
    {
             select.remove(0);
    }
   document.ajax.AreaSelect.add(document.createElement("OPTION"));
   document.ajax.AreaSelect.options[0].text="請選擇";
   document.ajax.AreaSelect.options[0].value="no";

var xmlDoc=xmlHttp.responseXML;
var proNode=xmlDoc.getElementsByTagName("province");

for(i=0;i<proNode.length;i++)
{
          if (proNode[i].getAttribute("id")==ProID)
          {
          var proNode2=xmlDoc.getElementsByTagName("province")[i];
    break;
          }
}
    CityNode=proNode2.getElementsByTagName("city");

for(i=0;i<CityNode.length;i++)
{

     //alert(proNode[i].getAttribute("name"))
  if(CityNode[i].getAttribute("id")!="")
  {
   document.ajax.CitySelect.add(document.createElement("OPTION"));
   document.ajax.CitySelect.options[i+1].text=CityNode[i].getAttribute("name");
   document.ajax.CitySelect.options[i+1].value=CityNode[i].getAttribute("id");
  }
}

}

function CityChagnge()
{

</script>
<body onload="ProLoad()">
<form action=# name="ajax" >
<select name="ProSelect" onchange="CityLoad()">
<option>請選擇省份</option>
</select>

<select name="CitySelect" onchange="AreaLoad()">
<option>請選擇城市</option>
</select>
<select name="AreaSelect">
<option>請選擇</option>
</select>
</form>
</BODY>
</HTML>

本文章原先以中文撰寫並發佈於 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