用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,见附件

 

yii 下拉列表多级联动 dropDownList

视图: cdnauto/views/config/index.php echo CHtml::dropDownList('node', '', CHtml::listData(Node::...
  • ysdaniel
  • ysdaniel
  • 2013年06月27日 16:57
  • 7872

ajax实现下拉框联动

spring mvc+bootstrap            最近在做一个新闻不发布网站,网站栏目需要实现下拉框联动,因为没有用到前端框架,因此需要自己来写,废话不多说,思路是,跳转到新闻发布页...
  • u012157999
  • u012157999
  • 2016年10月30日 18:29
  • 3156

asp.net js实现dropdownlist二级联动(动态)

ASPX端代码: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/...
  • lishimin1012
  • lishimin1012
  • 2014年06月26日 21:06
  • 3198

利用ajax实现二级联动下拉框

下拉框二级联动,用ajax来实现是已经非常成熟的技术了。但对于我这个java菜鸟来说,真的是费了九牛二虎之力,各种百度,各种测试。终于得以实现。代码相对于网上的容易理解些。现把代码和我在编写的过程中遇...
  • qq_35778289
  • qq_35778289
  • 2016年08月04日 15:19
  • 537

关于省市区的下拉列表联动实现(JS+AJAX)

效果图如下,DB中存取的数据来抽取~      前台JSP页面的实现 企业地址: selected>${province.value} select...
  • huoshendawo_mo
  • huoshendawo_mo
  • 2015年11月16日 17:29
  • 2057

JQuery+Ajax实现下拉框联动(省市联动)

JQuery+Ajax实现下拉框联动
  • Abubu123
  • Abubu123
  • 2016年06月16日 14:56
  • 16033

使用Ajax和Jquery配合数据库实现下拉框的二级联动

首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city :          城市表 如图: 然后再在java中建立相关的实体类与之对应 ...
  • Evan_QB
  • Evan_QB
  • 2017年07月19日 19:09
  • 9994

JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)

AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)
  • xiaohai798
  • xiaohai798
  • 2014年06月24日 10:30
  • 15331

Ajax实现下拉框二级级联

AJAX实现的简单的无刷新效果,页面中有两个下拉框,当第一个下拉框改变时,提交请求到后台,查找到对应的数据,添加到第二个下拉框列表里。代码如下: //Ajax实现下拉框二级级联,...
  • u011518709
  • u011518709
  • 2013年09月05日 14:05
  • 4549

jQuery实现二级联动下拉框

jsp页面: 技术方向* ${techDirec} ...
  • tianguobing
  • tianguobing
  • 2016年12月01日 09:34
  • 2087
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用AJAX实现下拉框(DropDownList)的联动
举报原因:
原因补充:

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