Ajax 实现省市县三级联动【无刷新】三层 | 三级联动—有刷新

发布时间：2020-12-16 01:01:58 所属栏目：百科来源：网络整理

导读：SQL建表 HTML——HTMLPage1.htm [html] view plain copy html xmlns = "http://www.w3.org/1999/xhtml" head title Ajax实现省市县三级联动【无刷新】三层 / style type = "text/css" select { width:130px; } style script src = "js/Jquery1.7.js" type =

SQL建表

HTML——HTMLPage1.htm

[html] 
   view plain 
   copy 
    
   
 <htmlxmlns="http://www.w3.org/1999/xhtml">
 head>
title>Ajax实现省市县三级联动【无刷新】三层</styletype="text/css" select
 {
 width:130px;
 }
stylescriptsrc="js/Jquery1.7.js"type="text/javascript">scriptscripttype="text/javascript" $(function(){
 $.ajax({
 type:"post",
 contentType:"application/json",
 url:"WebService1.asmx/GetProvince",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> data:"{}",248); line-height:18px"> success:function(result){
 varstroption='';
 for(vari=0;i<result.d.length;i++){
 stroption+='optionvalue='+result.d[i].provinceID+'>';
 stroption+=result.d[i].provincename;
option $('#seprovince').append(stroption);
 })
 
 $('#seprovince').change(function(){
 $('#secityoption:gt(0)').remove();
 $('#seareaoption:gt(0)').remove();
 
 $.ajax({
 type:"post",248); line-height:18px"> contentType:"application/json",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> url:"WebService1.asmx/GetCItyByPro",248); line-height:18px"> data:"{proid:'"+$(this).val()+"'}",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> success:function(result){
 varstrocity='';
 for(vari=0;iresult.d.length;i++){
 strocity+='optionvalue='+result.d[i].cityID+'>';
 strocity+=result.d[i].cityname;
 }
 $('#secity').append(strocity);
 })
 $('#secity').change(function(){
 url:"WebService1.asmx/GetAreaByCity",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> data:"{cityid:'"+$(this).val()+"'}",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> varstroarea='';
 stroarea+='optionvalue='+result.d[i].areaID+' stroarea+=result.d[i].areaname;
 $('#searea').append(stroarea);
bodytabletrtd 用户名
inputid="Text1"type="text"/>
 密码
inputid="Text2"type="text" 确认密码
inputid="Text3"type="text" 邮箱
inputid="Text4"type="text" 地址
selectid="seprovince">--请选择--select 省
selectid="secity">市
selectid="searea">县
html>

创建Web服务——WebService1.asmx

copy

usingSystem;

usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Services;
usingSystem.Data;
namespaceWebApplication1
{
///summary ///WebService1的摘要说明
[WebService(Namespace="http://tempuri.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
//若要允许使用ASP.NETAJAX从脚本中调用此Web服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
publicclassWebService1:System.Web.Services.WebService
[WebMethod]
publicstringHelloWorld()
return"HelloWorld";
[WebMethod]
publicListModel.province>GetProvince()
BLL.provincebpro=newBLL.province();
List>list=bpro.GetListModel();
returnlist;
publicListModel.city>GetCItyByPro(stringproid)
BLL.citybcity=newBLL.city();
List>list=bcity.GetListModel("father='"+proid+"'");
returnlist;
Model.area>GetAreaByCity(stringcityid)
BLL.areabarea=newBLL.area();
>list=barea.GetListModel("father='"+cityid+"'");
}

====三层 ——> 创建类库 BLL 、DAL、DataAccess、MODEL——> 在类库里添加类

province表——动软生成类

GetListModel在BLL层定义

GetListModel转到定义——DAL层

city表——动软生成类

city在BLL层定义

copy

publicList>GetListModel(stringstrsql)

returndal.GetListModel(strsql);
}

city转到定义——DAL层

copy 
    
   

publicSystem.Collections.Generic.List System.Collections.Generic.List>list=newSystem.Collections.Generic.List>();

DataTabledt=GetList(strsql).Tables[0];

foreach(DataRowrowindt.Rows)

Model.citymcity=newModel.city();

mcity.id=Convert.ToInt32(row["id"]);

mcity.cityID=row["cityID"].ToString();

mcity.cityname=row["cityname"].ToString();

list.Add(mcity);

area表——动软生成类

area在BLL层定义

copy 
    
   

DataTabledt=GetList(strsql).Tables[0];

System.Collections.Generic.List>();
Model.areamarea=newModel.area()
id=Convert.ToInt32(row["id"]),
areaID=row["areaID"].ToString(),
areaname=row["areaname"].ToString()
};
list.Add(marea);
=========================================================三级联动—有刷新【两种实现方法】

第一种：

SQL建表

三层 ——> 创建类库 BLL 、DAL、DataAccess、MODEL——> 在类库里添加类

Web窗体——WebForm1.aspx

前台：

copy
1. onselectedindexchanged="ddlprovince_SelectedIndexChanged"asp:DropDownList>省
2. asp:DropDownListID="ddlcity"runat="server"AutoPostBack="True"
3. onselectedindexchanged="ddlcity_SelectedIndexChanged"asp:DropDownListID="ddlarear"runat="server">县
4. form后台：——引用了动软生成的类库
  copy
  1. usingSystem.Web.UI.WebControls;
  2. usingSystem.Data;
  3. namespaceWebApplication1
  4. publicpartialclassWebForm1:System.Web.UI.Page
  5. protectedvoidPage_Load(objectsender,EventArgse)
  6. if(!IsPostBack)
  7. LoadProvince();
  8. Model.provincep=newModel.province();
  9. p.id=1;
  10. p.provinceID="222221";
  11. p.provincename="北京";
  12. Model.provincep1=newModel.province();
  13. p1.id=2;
  14. p1.provinceID="222222";
  15. p1.provincename="天津";
  16. privatevoidLoadProvince()
  17. BLL.provincebpro=newBLL.province();
  18. DataTabledt=bpro.GetList("").Tables[0];
  19. ddlprovince.DataSource=dt;
  20. ddlprovince.DataTextField="provincename";
  21. ddlprovince.DataValueField="provinceID";
  22. ddlprovince.DataBind();
  23. protectedvoidddlprovince_SelectedIndexChanged(objectsender,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> if(this.ddlarear.Items.Count>0)
  24. this.ddlarear.Items.Clear();
  25. BLL.citybcity=newBLL.city();
  26. stringproid=this.ddlprovince.SelectedItem.Value;
  27. DataTabledt=bcity.GetList("father='"+proid+"'").Tables[0];
  28. ddlcity.DataSource=dt;
  29. ddlcity.DataTextField="cityname";
  30. ddlcity.DataValueField="cityID";
  31. ddlcity.DataBind();
  32. //绑定默认显示的市级区划下面所有的县
  33. stringcityid=dt.Rows[0]["cityID"].ToString();
  34. BLL.areabaraer=newBLL.area();
  35. DataTabledtarea=baraer.GetList("father='"+cityid+"'").Tables[0];
  36. ddlarear.DataSource=dtarea;
  37. ddlarear.DataTextField="areaname";
  38. ddlarear.DataValueField="areaID";
  39. ddlarear.DataBind();
  40. protectedvoidddlcity_SelectedIndexChanged(objectsender,EventArgse)
  41. BLL.areabaraer=newBLL.area();
  42. stringcityid=this.ddlcity.SelectedItem.Value;
  43. DataTabledt=baraer.GetList("father='"+cityid+"'").Tables[0];
  44. ddlarear.DataSource=dt;
  45. }
  Web窗体——WebForm2.aspx
  
  前台：
  
  copy
  1. 后台：
    
    copy
    1. protectedvoidPage_Load(objectsender,248); line-height:18px"> if(!IsPostBack)
    2. LoadProvince();
    3. BLL.provincebprovince=newBLL.province();
    4. >list=bprovince.GetListModel();
    5. this.ddlprovince.DataSource=list;
    6. this.ddlprovince.DataTextField="provincename";
    7. this.ddlprovince.DataValueField="provinceID";
    8. this.ddlprovince.DataBind();
    9. protectedvoidddlprovince_SelectedIndexChanged(objectsender,248); line-height:18px"> stringid=this.ddlprovince.SelectedItem.Value;
    10. >list=bcity.GetListModel("father="
    11. +id);
    12. this.ddlcity.DataSource=list;
    13. this.ddlcity.DataTextField="cityname";
    14. this.ddlcity.DataValueField="cityID";
    15. this.ddlcity.DataBind();
    16. protectedvoidddlcity_SelectedIndexChanged(objectsender,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> stringid=this.ddlcity.SelectedItem.Value;
    17. BLL.areabarear=newBLL.area();
    18. >list=barear.GetListModel("father="
    19. +id);
    20. this.ddlarear.DataSource=list;
    21. this.ddlarear.DataTextField="areaname";
    22. this.ddlarear.DataValueField="areaID";
    23. this.ddlarear.DataBind();
    24. }
    （编辑：李大同）
    
    【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新

Ajax 实现省市县三级联动【无刷新】三层 | 三级联动—有刷新