ajax完美解決 下拉框連動

來源:互聯網
上載者:User
ajax|解決|下拉

<select id="Agent" name="Agent"></select>

接下來當然是定義XmlHttpRequest對象。
   

var xmlhttp;
function CreateXmlHttp()
   { 


   //非IE瀏覽器建立XmlHttpRequest對象
    if(window.XmlHttpRequest)
    {
     xmlhttp=new XmlHttpRequest();
    }
    //IE瀏覽器建立XmlHttpRequest對象
     if(window.ActiveXObject)
    {
    try
    {
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e)
    {
    try{
     xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
     }
     catch(ex){}
    }
    }
   } 

這個在我的多篇blog文章裡都有闡述,就不多說了。

接下來當然是利用該對象來發送條件,獲得資料,並且將獲得的資料繫結到agent這個下拉框。
在地區下拉框的onchange事件裡面觸發函數AjaxSend();


function AjaxSend()
{
     //建立XmlHttpRequest對象
     CreateXmlHttp();    
     if(!xmlhttp)
     {
         alert("建立xmlhttpRequest發生異常!");
         return false;
     }  
     //擷取地區下拉框的value值,作為條件發送
     var ss=document.getElementById("a2").value.substring(0,4);
     }
    //要發送的url,UserAjax我專門用來取資料
     url="UserAjax.aspx?area="+ss;
     xmlhttp.open("POST",url,false);
       
  
     xmlhttp.onreadystatechange=function()
     {
 
         if(xmlhttp.readyState==4)
         {
             if(xmlhttp.status==200)
             { 
               //清空原下拉框
              document.getElementById("agent").options.length=0;          
               //str為返回的一個字串,形式為"0001/代理商1,0002/代理商2,0003/代理商3"
               var str=xmlhttp.responseText;
              //將該字串分割為數組形式
               var strs=str.split(",");
               document.getElementById("agent").options.add(new Option("----------","000000"));
               for(var i=0;i<strs.length-1;i++)
               {
                //擷取value值(編號)
                var a=strs[i].substring(0,strs[i].lastIndexOf("/"));
                //擷取綁定內容
                var b=strs[i].substring(strs[i].lastIndexOf("/")+1,strs.length);
                //綁定到下拉框
                document.getElementById("agent").options.add(new Option(b,a));              
               }
                
             }
          }
      }          
      xmlhttp.send();
}

另外順便介紹一下UserAjax接收到該地區編號後擷取資料返回字串的過程。


 string Area = Request.QueryString["area"].ToString();
        DataTable data = "產生DataTable,涉及到公司核心代碼,省略"
        string aa = "";
        for (int i = 0; i < data.Rows.Count; i++)
        {
            if (aa == "")
            {
                aa = data.Rows[i]["id"].ToString()+"/"+data.Rows[i]["name"].ToString();
            }
            else
            {
                aa = aa + "," + data.Rows[i]["id"].ToString() +"/"+ data.Rows[i]["name"].ToString();
            }
        }
       Response.Write(aa);



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.