基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQueryAjax实现下拉框无刷新联动的具体代码，供大家参考，具体内容如下
HTML代码：
@{
Layout=null;
}
@usingDAL;
@usingSystem.Data;
@{
AreaDalareaDal=newAreaDal();
stringareaId=ViewBag.areaId;
DataRowdrArea=areaDal.GetArea(areaId);
stringcountyId=drArea==null?"-1":drArea["countyId"].ToString();
DataRowdrCounty=areaDal.GetCounty(countyId);
stringcityId=drCounty==null?"-1":drCounty["cityId"].ToString();
DataRowdrCity=areaDal.GetCity(cityId);
stringprovinceId=drCity==null?"-1":drCity["provinceId"].ToString();
}
商圈选择
//选中
functionselect(selId,id,callback){
$("#"+selId).val(id);
if(callback)callback();
}
//获取省列表
functiongetProvinces(callback){
$.ajax({
type:"POST",
url:"@Url.Content("~/Backstage/Area/GetProvinces")",
data:{},
success:function(text){
$("#province").html(text);
if(callback)callback();
},
error:function(){
}
});
}
//获取市列表
functiongetCities(pid,callback){
$.ajax({
type:"POST",
url:"@Url.Content("~/Backstage/Area/GetCities")",
data:{"provinceId":pid,},
success:function(text){
$("#city").html(text);
if(callback)callback();
},
error:function(){
}
});
}
//获取区县列表
functiongetCounties(pid,callback){
$.ajax({
type:"POST",
url:"@Url.Content("~/Backstage/Area/GetCounties")",
data:{"cityId":pid,},
success:function(text){
$("#county").html(text);
if(callback)callback();
},
error:function(){
}
});
}
//获取商圈列表
functiongetAreas(pid,callback){
$.ajax({
type:"POST",
url:"@Url.Content("~/Backstage/Area/GetAreas")",
data:{"countyId":pid,},
success:function(text){
$("#area").html(text);
if(callback)callback();
},
error:function(){
}
});
}
==请选择==
==请选择==
==请选择==
==请选择==
//选择省
$("#province").change(function(){
varid=$(this).find("option:selected").val();
getCities(id,function(){
$("#city").change();
});
});
//选择市
$("#city").change(function(){
varid=$(this).find("option:selected").val();
getCounties(id,function(){
$("#county").change();
});
});
//选择区县
$("#county").change(function(){
varid=$(this).find("option:selected").val();
getAreas(id,function(){
$("#area").change();
});
});
getProvinces(function(){
select("province",'@provinceId',function(){
getCities('@provinceId',function(){
select("city",'@cityId',function(){
getCounties('@cityId',function(){
select("county",'@countyId',function(){
getAreas('@countyId',function(){
select("area",'@areaId');
});
});
});
});
});
});
});
Controller代码：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Web.Mvc;
usingDAL;
namespaceControllers.Backstage
{
///
///行政区划
///
publicclassAreaController:AdminBaseController
{
#region构造函数及变量
privateSQLiteHelper.SQLiteHelpersqliteHelper;
privateAreaDalareaDal;
publicAreaController()
{
sqliteHelper=newSQLiteHelper.SQLiteHelper();
areaDal=newAreaDal();
}
#endregion
#region行政区划商圈级联选择页面
publicActionResultAreaSelect()
{
returnPartialView();
}
#endregion
#region获取全部省
publicActionResultGetProvinces()
{
DataTabledt=areaDal.GetProvincesAll();
StringBuildersbHtml=newStringBuilder();
sbHtml.Append("==请选择==");
foreach(DataRowdrindt.Rows)
{
sbHtml.AppendFormat("{1}",dr["id"].ToString(),dr["name"].ToString());
}
returnContent(sbHtml.ToString());
}
#endregion
#region根据省获取市
publicActionResultGetCities(stringprovinceId)
{
DataTabledt=areaDal.GetCities(provinceId);
StringBuildersbHtml=newStringBuilder();
sbHtml.Append("==请选择==");
foreach(DataRowdrindt.Rows)
{
sbHtml.AppendFormat("{1}",dr["id"].ToString(),dr["name"].ToString());
}
returnContent(sbHtml.ToString());
}
#endregion
#region根据市获取区县
publicActionResultGetCounties(stringcityId)
{
DataTabledt=areaDal.GetCounties(cityId);
StringBuildersbHtml=newStringBuilder();
sbHtml.Append("==请选择==");
foreach(DataRowdrindt.Rows)
{
sbHtml.AppendFormat("{1}",dr["id"].ToString(),dr["name"].ToString());
}
returnContent(sbHtml.ToString());
}
#endregion
#region根据区县获取商圈
publicActionResultGetAreas(stringcountyId)
{
DataTabledt=areaDal.GetAreas(countyId);
StringBuildersbHtml=newStringBuilder();
sbHtml.Append("==请选择==");
foreach(DataRowdrindt.Rows)
{
sbHtml.AppendFormat("{1}",dr["id"].ToString(),dr["name"].ToString());
}
returnContent(sbHtml.ToString());
}
#endregion
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。