asp.net DropDownList无刷新ajax二级联动实现详细过程

只适合新手制作DropDownList无刷新ajax二级联动效果:
数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解:

这里写图片描述

//页面主要代码:

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                    Width="200" AutoPostBack="True">
                </asp:DropDownList>
                <asp:DropDownList ID="DropDownList2" runat="server" Width="200">
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>

//以上代码实现ajax的无刷新效果

//程序主要代码:

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDrop();
        }
    }
    private void BindDrop()
    {
        //将数据捆绑到下拉列表中
        string sqlStr = "select * from pingpai";
        DataTable dt=DataBase.GetTable(sqlStr);
        DropDownList1.DataTextField = "pingpai"; //设置列表显示的字
        DropDownList1.DataValueField = "typeid"; //设置列表提交后获得的字段,自己理解为隐藏绑定数据
        DropDownList1.DataSource = dt.DefaultView;
        DropDownList1.DataBind();
        DropDownList1.Items.Insert(0, new ListItem("请选择车子品牌", ""));//第一项中加入内容,重点是绑定后添加
        DropDownList2.Items.Insert(0, new ListItem("请选择车子品牌型号", ""));//第一项中加入内容,重点是绑定后添加      
    }


    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        int typeid = Convert.ToInt32(DropDownList1.SelectedValue);//页面加载后DropDownList1.DataValueField隐藏绑定的数据,后边根据它查询DropDownList2要显现的数据
        string sqlStr = "select * from type where typeid='" + typeid + "'";

        DataTable dt = DataBase.GetTable(sqlStr);
        DropDownList2.DataTextField = "type"; //设置DropDownList1事件SelectedIndexChanged改变后DropDownList2列表显示的数据
        DropDownList2.DataSource = dt.DefaultView;
        DropDownList2.DataBind();;
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个是ajax 实现DropDownList刷新联动。里面有数据库结构和内容,表结构的是sql2000的, 关键代码: <SCRIPT language="javascript"> //城市------------------------------ function cityResult() { var city=document.getElementById("DropDownList1"); AjaxMethod.GetCityList(city.value,get_city_Result_CallBack); } function get_city_Result_CallBack(response) { if (response.value != null) { //debugger; document.all("DropDownList2").length=0;          var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++)      {      var name=ds.Tables[0].Rows[i].CityName;        var id=ds.Tables[0].Rows[i].ProvinceID;        document.all("DropDownList2").options.add(new Option(name,id));      } } } else { document.all("DropDownList2").length=0; } return } //市区---------------------------------------- function areaResult() { var area=document.getElementById("DropDownList2"); AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack); } function get_area_Result_CallBack(response) { if (response.value != null) { document.all("DropDownList3").length=0;          var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++)      {        var name=ds.Tables[0].Rows[i].ProvinceName;        var id=ds.Tables[0].Rows[i].id;        document.all("DropDownList3").options.add(new Option(name,id));      } } } else { document.all("DropDownList3").length=0; } return } </SCRIPT>

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值