DropDownList无刷新三级联动

public void getDdlInfo(DropDownList province,DropDownList city,DropDownList town,Page myPage)
{
 
//初始化省
 string sql="select 序号,省名 from 省表";        
 SqlCommand comm
=new SqlCommand(sql,conn);
 province.Items.Clear();
 province.Items.Add(
new ListItem("-=请选择=-","0"));
 conn.Open();
 SqlDataReader dr
=comm.ExecuteReader();
 
while(dr.Read())
 {
  province.Items.Add(
new ListItem(dr[1].ToString(),dr[0].ToString()));
 }
 dr.Close();
 
//初始化市
 city.Items.Add(new ListItem("-=请选择=-","0"));

 
//初始化区
 town.Items.Add(new ListItem("-=请选择=-","0"));

 sql
="select 省名,市名,区名 from 省表,市表,区表 where 省表.序号=市表.省ID and 市表.序号=区表.市ID";
 comm.CommandText
=sql;
 dr
=comm.ExecuteReader();
 
int i=0;
 
while(dr.Read())
 {
  
//将信息隐藏的写到页面中
  myPage.RegisterClientScriptBlock(i.ToString(),"<input type=hidden name=info value="+dr[0].ToString()+"$"+dr[1].ToString()+"$"+dr[2].ToString()+">");
  i
++;
 }
 conn.Close();
}

JS脚本,DropDownList的change事件
//在省框选项变化时,初始化市、区框中的选项
function cProvince()
{
 //if (document.forms[0].province.selectedIndex==0)
 {
  //清空下拉列表框
  document.forms[0].city.options.length=0;  
  document.forms[0].town.options.length=0;
  //给下拉列表框添加初始项
  document.forms[0].city.options[0]=new Option("-=请选择=-","0");
  document.forms[0].town.options[0]=new Option("-=请选择=-","0");
 }
 var p=document.forms[0].province.options(document.forms[0].province.selectedIndex).text;
 var temp="";
 for(i=0;i<document.forms[0].info.length;i++)
 {
  var str=document.forms[0].info[i].value.split("$");
  if (str[0]==p)
  {
   for(j=0;j<document.forms[0].city.options.length;j++) //遍历下拉列表框看是否已经存在该项
   {
    if (document.forms[0].city.options[j].text==str[1])
    {
     temp=str[1];  //说明该下拉列表中有该项了,以便在接下来的循环中进行判断
     break;
    }
   }
   if (temp==str[1])  //如果下拉列表中已经存在该项,不再添加
   {
    continue;
   }
   var num=document.forms[0].city.options.length;
   document.forms[0].city.options[num]=new Option(str[1],num);
  }
 }
 document.forms[0].ptext.value=document.forms[0].province.options[document.forms[0].province.selectedIndex].text
}
//市框选项发生变化时,初始化区框
function cCity()
{
 //if (document.forms[0].city.selectedIndex==0)
 {
  document.forms[0].town.options.length=0;
  document.forms[0].town.options[0]=new Option("-=请选择=-","0")
 }
 var c=document.forms[0].city.options(document.forms[0].city.selectedIndex).text;
 var temp="";
 for(i=0;i<document.forms[0].info.length;i++)
 {
  var str=document.forms[0].info[i].value.split("$");
  if (str[1]==c)
  {
   if (temp!=str[2])  //如果下拉列表中已经存在该项,不再添加
   {
    //continue;
    var num=document.forms[0].town.options.length;
    document.forms[0].town.options[num]=new Option(str[2],num);
    temp=str[2];  //说明该下拉列表中有该项了,以便在接下来的循环中进行判断
   } 
  }
 }
 document.forms[0].ctext.value=document.forms[0].city.options[document.forms[0].city.selectedIndex].text
}

 
  • 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、付费专栏及课程。

余额充值