用AJAX实现下拉框(DropDownList)的联动

原创 2007年10月09日 15:34:00

目的:学习AJAX,用于实现在 选择“省份”下拉框时候,联动实现在“城市”下拉框中显示出相应的“城市”名称 。

步骤1:在页面CS文件中的PAGE_LOGD方法中注册

 protected void Page_Load(object sender, EventArgs e)
   {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(cs文件的类名));

  ///向页面注册对象,在前台用该对象调用后台方法

}

步骤2. 在页面CS文件中创建在前台页面需要调用的后台方法

    [AjaxPro.AjaxMethod]
    public DataSet getBranchNameByAjax(string selectedValue)
    {

       IList<SiteBranch> list = siteBaseInfoManager.GetBranchInfo(selectedValue);
       DataSet ds = new DataSet();
       DataTable dtId = new DataTable();
       DataTable dtName = new DataTable();
       DataRow idRow, nameRow;
       dtId.Columns.Add(new DataColumn("id"));
       dtName.Columns.Add(new DataColumn("name"));
       for(int i=0;i<list.Count;i++)
        {
            idRow = dtId.NewRow();
            nameRow =dtName.NewRow();
            idRow[0] = list[i].Id;
            nameRow[0] = list[i].FZJG;

            dtId.Rows.Add(idRow);
            dtName.Rows.Add(nameRow);
        }
        ds.Tables.Add(dtId);
        ds.Tables.Add(dtName);

        return ds;
       
    } 

步骤3:在下拉框属性中加入JS方法,如下:

 <asp:DropDownList ID="DropDownListPlace" runat="server" onchange="getBranchNameByAjax(this.value)"
                        Width="85px">
                    </asp:DropDownList>

步骤4:AJAX调用的JS函数,如下:

function getBranchNameByAjax(value)
{

 Module_DataManage_SiteInfoManage_SiteInfoManage.getBranchNameByAjax(value,fillSiteBranchByresponse);

}
function fillSiteBranchByresponse(response)
{
  if(response.value==null)
           {
                 if(response.error=="login")
                 {
                     window.location.reload();
                 }
                 alert("与服务器断开连接!");
            }
            else
            {
              var dtId=response.value.Tables[0];
              var dtName=response.value.Tables[1];
              document.getElementById("DropDownListBranch").disabled=false;
              document.getElementById("DropDownListBranch").length=0;
              // if(dtId==""||dtId==null){document.getElementById("DropDownListBranch").options.add(new Option("",""));}
               for(var i=0;i<dtId.Rows.length;i++)
               {
                  var id=dtId.Rows[i].id;
                  var name=dtName.Rows[i].name;
                   if(name==""||name==null){document.getElementById("DropDownListBranch").options.add(new Option("",""));}
                  document.getElementById("DropDownListBranch").options.add(new Option(name,id));
               }
           }
 
}

步骤5:在工程中加入AjaxPro.dll,见附件

 

DropDownList控件实现省市联动(AJAX实现)

http://blog.csdn.net/bdstjk 在网站注册的页面上经常要选择注册地点,如果改变省的名称就能出现对应的市级的名称,将为用户带来很大的方便,虽然用.NET的服务端时间实现很容易,...
  • bdstjk
  • bdstjk
  • 2012-04-27 11:49:55
  • 10579

ajax实现DropDownList联动动态下拉(从数据库读值)

前台页面肯定至少有两个DropDownList控件了,在基于.net框架下的ajax,还要加一个scriptmanager控件(必须使用)管理各个ajax控件和jscript文件。两外还有两个实现无刷...
  • zhuzit
  • zhuzit
  • 2008-07-04 15:20:00
  • 1902

ASP.NET 通过AJAX实现DropDownList级联效果

  • 2013年10月31日 09:18
  • 4KB
  • 下载

DropDownList无刷新ajax二级联动效果

页面主要代码:                                                                  Width="200" Aut...
  • zhaohongx
  • zhaohongx
  • 2015-02-15 17:00:29
  • 1178

ajax实现DropDownList 联动

a.aspx html部分    a        http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">    ...
  • zhuawang
  • zhuawang
  • 2007-03-07 16:23:00
  • 1382

<em>ajax</em>.dll <em>实现DropDownList</em>无刷新联动

这个是<em>ajax 实现DropDownList</em>无刷新联动。里面有数据库结构和内容,表结构的是sql2000的, 关键代码: &lt;SCRIPT language=&quot;javascript&quot;&gt; //城市---...
  • 2018年04月14日 00:00

WebForm使用JQuery实现DropDownList无刷新联动

原来用的微软封装的Ajax控件UpdatePannel和ScriptManager去实现无刷新联动,但一直出现意料之外的现象导致不正常联动。单独的做demo就没事,放到系统中就出问题,经过调试之后仍然...
  • wlccomeon
  • wlccomeon
  • 2014-11-30 22:02:11
  • 5332

ASP.NET——实现两个下拉框动态联动

这样的动态联动,一般由多个下拉框组成一组菜单,比如上面用到的两个下拉框。下拉菜单之间有联动的关系。当上级的选中项发生改变时,下级会根据上级中的选中项显示相应的内容。 用了动态联动之后,当面...
  • u010066934
  • u010066934
  • 2014-08-11 16:10:22
  • 7618

ajax extension 实现dropdownlist 无刷 联动

今天利用ajax extension 做了一个无刷 dropdownlist 联动的效果。  数据库中一张car table ,两列分别为band,model。  实现效果,点击dropdownlis...
  • JYYCOM
  • JYYCOM
  • 2007-09-26 23:40:00
  • 768

用AJAX实现下拉框(DropDownList)的联动

目的:学习AJAX,用于实现在 选择“省份”下拉框时候,联动实现在“城市”下拉框中显示出相应的“城市”名称 。步骤1:在页面CS文件中的PAGE_LOGD方法中注册  protected void P...
  • aaronbai
  • aaronbai
  • 2007-10-09 15:34:00
  • 1758
收藏助手
不良信息举报
您举报文章:用AJAX实现下拉框(DropDownList)的联动
举报原因:
原因补充:

(最多只允许输入30个字)