Ajax實現兩級下拉框連動的應用

來源:互聯網
上載者:User
<asp:DropDownList onChange="GetChange(this);" id="drp1" runat="server"></asp:DropDownList>
   <asp:DropDownList id="drp2" runat="server"></asp:DropDownList>

js指令碼:返回資料
            function GetChange(drp)
            {
                var num = drp.options[drp.selectedIndex].value;
                WebForm3.GetDrp(num,drp_CallBack);
            }
            function drp_CallBack(response)
            {
                if(response.error != null)
                {
                    alert(response.error);
                    return;
                }
                var drp = document.getElementById("<% = drp2.ClientID %>");
                var data = response.value;
                if(data == null || typeof(data) != 'object')
                {
                    return;
                }
                drp.options.length = 0;
                for(i=0;i<data.length;i++)
                {
                    var o = data[i];
                    drp.options[drp.options.length] = new Option(data[i],data[i]);
                }
            }

後台代碼實現
        private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此處放置使用者代碼以初始化頁面
            Ajax.Utility.RegisterTypeForAjax(typeof(ZKMarketing.WebForm3));
            if(!Page.IsPostBack)
            {
                for(int i=5;i<11;i++)
                    drp1.Items.Add(new ListItem(i.ToString(),i.ToString()));
                drp2.Items.Add(new ListItem("請選擇","-1"));
            }
        }
        [Ajax.AjaxMethod()]
        public ArrayList GetDrp(int num)
        {
            ArrayList al = new ArrayList(num);
            al.Clear();
            for(int i=0;i<num;i++)
            {
                ListItem li = new ListItem(i.ToString(),i.ToString());
                al.Add(li);
            }
            return al;
        }

同時要設定web.Config檔案,  
<httpHandlers> 
     <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
  </httpHandlers>

上面是我在做一個具體項目的時候,做的一個測試頁面,由於是第一次,所以就寫了上面的這樣一個簡單的測試頁面來實現AJAX,現在具體的項目中的功能也基本上完成。

相關文章

聯繫我們

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