This time I will show you how to implement non-refresh linkage of drop-down boxes with Ajax. What are the precautions for Ajax to implement non-refresh linkage of drop-down boxes. Here is a practical case, let’s take a look.
HTML code:
@{
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 code:
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
}
}I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How jQuery controls dynamic page elements
How to write ajax requests with the highest performance in jQuery
How two zTree interact with each other
The above is the detailed content of How to achieve non-refresh linkage of drop-down box with Ajax. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
