本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码，供大家参考，具体内容如下
HTML代码：
@{
Layout = null;
}
@using DAL;
@using System.Data;
@{
AreaDal areaDal = new AreaDal();
string areaId = ViewBag.areaId;
DataRow drArea = areaDal.GetArea(areaId);
string countyId = drArea == null ? \"-1\" : drArea[\"countyId\"].ToString();
DataRow drCounty = areaDal.GetCounty(countyId);
string cityId = drCounty == null ? \"-1\" : drCounty[\"cityId\"].ToString();
DataRow drCity = areaDal.GetCity(cityId);
string provinceId = drCity == null ? \"-1\" : drCity[\"provinceId\"].ToString();
}
<!DOCTYPE html>
<html>
<head>
<title>商圈选择</title>
<script type=\"text/javascript\">
//选中
function select(selId, id, callback) {
$(\"#\" + selId).val(id);
if (callback) callback();
}
//获取省列表
function getProvinces(callback) {
$.ajax({
type: \"POST\",
url: \"@Url.Content(\"~/Backstage/Area/GetProvinces\")\",
data: {},
success: function (text) {
$(\"#province\").html(text);
if (callback) callback();
},
error: function () {
}
});
}
//获取市列表
function getCities(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 () {
}
});
}
//获取区县列表
function getCounties(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 () {
}
});
}
//获取商圈列表
function getAreas(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 () {
}
});
}
</script>
</head>
<body>
<select id=\"province\">
<option value=\"-1\">==请选择==</option>
</select>
<select id=\"city\">
<option value=\"-1\">==请选择==</option>
</select>
<select id=\"county\">
<option value=\"-1\">==请选择==</option>
</select>
<select id=\"area\">
<option value=\"-1\">==请选择==</option>
</select>
<script type=\"text/javascript\">
//选择省
$(\"#province\").change(function () {
var id = $(this).find(\"option:selected\").val();
getCities(id, function () {
$(\"#city\").change();
});
});
//选择市
$(\"#city\").change(function () {
var id = $(this).find(\"option:selected\").val();
getCounties(id, function () {
$(\"#county\").change();
});
});
//选择区县
$(\"#county\").change(function () {
var id = $(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\');
});
});
});
});
});
});
});
</script>
</body>
</html>
Controller代码：
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using DAL;
namespace Controllers.Backstage
{
/// <summary>
/// 行政区划
/// </summary>
public class AreaController : AdminBaseController
{
#region 构造函数及变量
private SQLiteHelper.SQLiteHelper sqliteHelper;
private AreaDal areaDal;
public AreaController()
{
sqliteHelper = new SQLiteHelper.SQLiteHelper();
areaDal = new AreaDal();
}
#endregion
#region 行政区划商圈级联选择页面
public ActionResult AreaSelect()
{
return PartialView();
}
#endregion
#region 获取全部省
public ActionResult GetProvinces()
{
DataTable dt = areaDal.GetProvincesAll();
StringBuilder sbHtml = new StringBuilder();
sbHtml.Append(\"<option value=\'-1\'>==请选择==</option>\");
foreach (DataRow dr in dt.Rows)
{
sbHtml.AppendFormat(\"<option value=\'{0}\'>{1}</option>\", dr[\"id\"].ToString(), dr[\"name\"].ToString());
}
return Content(sbHtml.ToString());
}
#endregion
#region 根据省获取市
public ActionResult GetCities(string provinceId)
{
DataTable dt = areaDal.GetCities(provinceId);
StringBuilder sbHtml = new StringBuilder();
sbHtml.Append(\"<option value=\'-1\'>==请选择==</option>\");
foreach (DataRow dr in dt.Rows)
{
sbHtml.AppendFormat(\"<option value=\'{0}\'>{1}</option>\", dr[\"id\"].ToString(), dr[\"name\"].ToString());
}
return Content(sbHtml.ToString());
}
#endregion
#region 根据市获取区县
public ActionResult GetCounties(string cityId)
{
DataTable dt = areaDal.GetCounties(cityId);
StringBuilder sbHtml = new StringBuilder();
sbHtml.Append(\"<option value=\'-1\'>==请选择==</option>\");
foreach (DataRow dr in dt.Rows)
{
sbHtml.AppendFormat(\"<option value=\'{0}\'>{1}</option>\", dr[\"id\"].ToString(), dr[\"name\"].ToString());
}
return Content(sbHtml.ToString());
}
#endregion
#region 根据区县获取商圈
public ActionResult GetAreas(string countyId)
{
DataTable dt = areaDal.GetAreas(countyId);
StringBuilder sbHtml = new StringBuilder();
sbHtml.Append(\"<option value=\'-1\'>==请选择==</option>\");
foreach (DataRow dr in dt.Rows)
{
sbHtml.AppendFormat(\"<option value=\'{0}\'>{1}</option>\", dr[\"id\"].ToString(), dr[\"name\"].ToString());
}
return Content(sbHtml.ToString());
}
#endregion
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容