AJAX无刷新下拉框联动

AJAX无刷新下拉框联动的简单示例,分别使用了AJAX组件和xmlHttp异步刷新两种方式。

前台代码:

 

<% @ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="WebApplication1.WebForm8"
    ValidateRequest
="false" EnableEventValidation="false" 
%>

<! 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 > AJAX无刷新下拉框联动 </ title >

    
< script  language ="JavaScript" >
             
/*作者: WhirlWind(20080424)*/
             
                
//以XML获取下拉框4的数据
                var xmlHttp;
                
function XmlPost(obj)
                
{
                  
var svalue = obj.value;
                  
var webFileUrl = "?d3=" + svalue;
                  
//var result = "";
                  // xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
                   if (window.ActiveXObject)//创建对象
                       {
                       
this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                       }

                        
else
                     
{
                      
this.xmlHttp = new XMLHttpRequest();
                      }

                   
//将对象状态与事件相关联
                    xmlHttp.onreadystatechange=statechange;
                  xmlHttp.open(
"POST", webFileUrl, false);
                  xmlHttp.send(
"");
                  
//result = xmlHttp.responseText;
                  
                 
                }

                 
function statechange()
                 
{
                
//判断异步调用是否已经完成
                if(xmlHttp.readystate==4)
                
{
                    
//判断完成的提示代码是否是OK状态
                 if(xmlHttp.status==200)
                 

                 
//将返回数据作为参数,传递给填充方法
                   FillData(xmlHttp.responseText);
                  }

                 }

                 
else
                 
{
                         
var drr4=document.getElementById("<%=DropDownList4.ClientID %>");//服务器控件
                        var select1 = document.getElementById("Select1"); //HTML控件                                                                     
                       for (i = select1.length; i >= 0; i--)                                                                    
                      
{                                                                                                          
                        select1.remove(i); 
//清空
                        drr4.remove(i);                                                                            
                        }

                      
// alert("出现错误!");
                    }

               }

                 
function FillData(result)
                  
{
                     
                      
var drr4=document.getElementById("<%=DropDownList4.ClientID %>");//服务器控件
                        var select1 = document.getElementById("Select1"); //HTML控件                                                                     
                       for (i = select1.length; i >= 0; i--)                                                                    
                      
{                                                                                                          
                        select1.remove(i); 
//清空
                        drr4.remove(i);                                                                            
                        }

                     
if(result != "")
                   
{                                                                                                                                
                    
var piArray = result.split(",");//加载联动数据
                    for(var i=0;i<piArray.length;i++)
                    
{

                     
                      
var newOption = document.createElement("OPTION");                                                    
                            newOption.text
=piArray[i].toString() ;                                    
                            newOption.value
=piArray[i].toString();                                 
                            select1.options.add(newOption);     
                            
                            
var newOption1 = document.createElement("OPTION");              
                            newOption1.text
=piArray[i].toString() ;                                    
                            newOption1.value
=piArray[i].toString(); 
                            drr4.options.add(newOption1);
                                          
                    }

                  }

                  
else
                  
{
                    alert(
"返回的是空值!");
                  }

                  }

           
    
</ script >

    
< style  type ="text/css" >
        #Select1
        
{
            width
: 36px;
        
}

        .style1
        
{
            color
: #FF0000;
        
}

    
</ style >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
    
</ asp:ScriptManager >
    
< div >
        
< span  class ="style1" > AJAX刷新: </ span >< br  />
        下拉框1:
</ div >
    
< asp:DropDownList  ID ="DropDownList1"  runat ="server"  AutoPostBack ="True"  OnSelectedIndexChanged ="DropDownList1_SelectedIndexChanged" >
    
</ asp:DropDownList >
    
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
< br  />
    下拉框2:
    
< asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
        
< ContentTemplate >
            
< asp:DropDownList  ID ="DropDownList2"  runat ="server" >
            
</ asp:DropDownList >
        
</ ContentTemplate >
    
</ asp:UpdatePanel >
    
< p >
        
&nbsp; </ p >
    
< class ="style1" >
        异步刷新:
</ p >
    
< p >
        下拉框3:
</ p >
    
< p >
        
< asp:DropDownList  ID ="DropDownList3"  runat ="server" >
        
</ asp:DropDownList >
    
</ p >
    
< p >
        下拉框4:
</ p >
    
< p >
        
< asp:DropDownList  ID ="DropDownList4"  runat ="server" >
        
</ asp:DropDownList >
        服务器控件
</ p >
    
< p >
        
< select  id ="Select1"  name ="D1" >
            
< option ></ option >
        
</ select > HTML控件 </ p >
    
< p >
        
&nbsp; </ p >
    
</ form >
</ body >
</ html >

 

后台代码:

 

using  System;
using  System.Collections;
using  System.Configuration;
using  System.Data;
using  System.Linq;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.HtmlControls;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Xml.Linq;
using  System.Data.SqlClient;

namespace  WebApplication1
{
    
public partial class WebForm8 : System.Web.UI.Page
    
{
           
/*作者: WhirlWind(20080424)*/
    
        
//public string d1str = string.Empty;//下拉框字符串,以","分隔
        protected void Page_Load(object sender, EventArgs e)
        
{
            
string connstr = ConfigurationManager.ConnectionStrings["TestConnectionString"].ToString();//连接字符串
            if (!IsPostBack)
            
{
                drrlist1bind();
                drrlist2bind();
                drrlist3bind();

                
//DropDownList4.Items.Add(new ListItem("1", "1"));

            }


            
this.DropDownList3.Attributes.Add("onchange""XmlPost(this);");//添加事件属性
            drr4bind();//异步绑定
        }

        
//通过异步刷新绑定下拉框4
        private void drr4bind()
        
{
            
if (Request.QueryString["d3"!= null)
            
{
                
string s1 = Request.QueryString["d3"];
                SqlDataReader drr 
= SqlHelper.ExecuteReader(CommandType.Text, "select b from table_1 where c='" + s1 + "'"null);
                
string d1str = "";
                
while (drr.Read())
                
{
                    d1str 
+= "," + drr[0];
                }

                d1str 
= d1str.Substring(1);
                Response.Write(d1str);
                Response.End();


            }

        }

  
绑定下拉框
        
//选择事件
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        
{
            
string s1 = DropDownList1.SelectedValue;
            SqlDataReader dr 
= SqlHelper.ExecuteReader(CommandType.Text, "select b from table_1 where c='" + s1 + "'"null);
            DropDownList2.DataSource 
= dr;
            DropDownList2.DataTextField 
= "b";
            DropDownList2.DataValueField 
= "b";
            DropDownList2.DataBind();
            dr.Close();
        }

    }

}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<asp:TemplateColumn HeaderText="Plant" HeaderStyle-HorizontalAlign="center"> <ItemStyle CssClass="dxgv"></ItemStyle> <ItemTemplate> <asp:Label ID="lb_week_p" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.PLANTKEY") %>'> </asp:Label> </ItemTemplate> <FooterTemplate> <font face="宋体"></font> <asp:DropDownList ID="ddl_week_p" runat="server" Width="100px" AutoPostBack="true"> <asp:ListItem Selected="True" Value="">----</asp:ListItem> </asp:DropDownList> </FooterTemplate> <EditItemTemplate> <asp:DropDownList ID="ddl_e_week_p" ToolTip='<%# DataBinder.Eval(Container, "DataItem.PLANTKey") %>' OnSelectedIndexChanged="ddl_e_week_p_SelectedIndexChanged" AutoPostBack="true"runat="server" Width="100px"> </asp:DropDownList> <asp:Label ID="lb_week_p_edit" Visible="false" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.PLANTKEY") %>'></asp:Label> </EditItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn HeaderText="Storage Location" HeaderStyle-HorizontalAlign="center"> <ItemStyle CssClass="dxgv"></ItemStyle> <ItemTemplate> <asp:Label ID="lb_week_s" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.STORAGE_LOCATIONKEY") %>'> </asp:Label> </ItemTemplate> <FooterTemplate> <font face="宋体"></font> <asp:DropDownList ID="ddl_week_s" runat="server" Width="90px"> <asp:ListItem Selected="True" Value="">----</asp:ListItem> </asp:DropDownList> </FooterTemplate> <EditItemTemplate> <asp:DropDownList ID="ddl_e_week_s" ToolTip='<%# DataBinder.Eval(Container, "DataItem.STORAGE_LOCATIONKey") %>' runat="server" Width="90px"> </asp:DropDownList> <asp:Label ID="lb_week_s_edit" Visible="false" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.STORAGE_LOCATIONKEY") %>'></asp:Label> </EditItemTemplate> </asp:TemplateColumn> protected void ddl_week_p_SelectedIndexChanged(object sender, EventArgs e) { DropDownList item = (DropDownList)((Control)sender).Parent.Parent.FindControl("ddl_week_s"); item.DataTextField = "txt";

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值