基于jQuery Ajax实现下拉框无刷新联动
程序员文章站
2022-04-01 10:07:43
本文实例为大家分享了jquery ajax实现下拉框无刷新联动的具体代码，供大家参考，具体内容如下
html代码：
@{
layout = null;...
本文实例为大家分享了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
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 大数据时代悄然来临