您的位置：首页 > Web前端 > JavaScript

C# JavaScript自定义控件，省市区三级联动选择，动态加载数据

2017-06-22 17:06 357 查看

之前写了一个三级联动选择自定义控件，分享给大家。

这是控件截图：

下面是代码：

测试页面代码:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../../../scripts/artdialog/ui-dialog.css" rel="stylesheet" type="text/css" />
<link href="../../../scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="../../../scripts/jquery/jquery-1.11.2.min.js"></script>
<script src="../../../scripts/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../../scripts/artdialog/dialog-plus-min.js"></script>
<script src="../../../scripts/regionalization.js"></script>
<script>
function showDialog(id, hdfId) {
var that = $('#' + id);
var hdf = $('#' + hdfId);
that.attr("disabled", "true");
var d = dialog({
title: '选择地区',
content: '<div>\
<span>省  </span><select id="selectProvince" >\
</select>\
<span>市  </span><select id="selectCity">\
</select>\
<span>区  </span><select id="selectDistrict">\
</select>\
</div><script>\
regionalization.url = "../../../tools/admin_ajax.ashx?action=regionalization_get_child";\
regionalization.province = "#selectProvince";\
regionalization.city = "#selectCity";\
regionalization.district = "#selectDistrict";\
regionalization.init(function (value) {\
});',
okValue: '确定',
cancelValue: '取消',
ok: function () {
var value = $('#selectDistrict').children('option:selected').attr("value");
if (value == undefined) {
value = $('#selectCity').children('option:selected').attr("value");
};
if (value == undefined) {
value = $('#selectProvince').children('option:selected').attr("value");
};
var province = $('#selectProvince').children('option:selected').text();
var city = $('#selectCity').children('option:selected').text();
var district = $('#selectDistrict').children('option:selected').text();
var strVale = city == "" ? province : province + "-" + city;
strVale = district == "" ? strVale : strVale + "-" + district;
this.close(strVale + "===" + value);
this.remove();
},
onshow: function () {

},
onclose: function () {
that.removeAttr("disabled")
},
cancel: function () { }
});
d.addEventListener('close', function () {
if (this.returnValue != "") {
var a = this.returnValue.split("===")
that.val(a[0]);
hdf.val(a[1]);
}
});
d.show(that[0]);
}
$(function () {
//籍贯选择
$("#inputTxt").click(function () {
alert("sdd")
showDialog('inputTxt', 'hfield');
});
});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="inputTxt" />

d172
<asp:HiddenField runat="server" ID="hfield" />
</div>
</form>

</body>
</html>

这里使用了artdialog弹出对话框，有关artdialog的使用可以查看aqi文档：artDialog

三级联动的js代码：regionalization.js

//regionalization.js

var regionalization = {
province: "",
city: "",
district: "",
url:"",
callback:null,
init: function (callback) {
regionalization.selectProvince();
regionalization.callback = callback;
$(regionalization.province).bind("change", regionalization.selectCity);
$(regionalization.city).bind("change", regionalization.selectDistrict);
},
selectProvince: function () {
$.ajax({
type: "post",
url: regionalization.url,
data: {},
success: function (msg) {
if (msg.status == 1) {
var obj = msg;
for (var i = 0; i < obj.data.length; i++) {
$(regionalization.province).append("<option value=" + obj.data[i].RegionalizationID + ">" + obj.data[i].Name + "</option>");
}
regionalization.selectCity();
}
else {
alert(msg.msg);
}
}
})
},
selectCity: function () {
$(regionalization.city).html("");
var value = $(regionalization.province).children('option:selected').attr("value");
var url = regionalization.url;
if (value == undefined) {
return;
}
url += "&parentId=" + value;
$.ajax({
type: "post",
url: url,
data: {},
success: function (msg) {
if (msg.status == 1) {
var obj = msg;
//alert(obj.data[0].Name)
for (var i = 0; i < obj.data.length; i++) {
$(regionalization.city).append("<option value=" + obj.data[i].RegionalizationID + ">" + obj.data[i].Name + "</option>");
}
regionalization.selectDistrict();
}
else {
alert(msg.msg);
}
}
})
},
selectDistrict: function () {
$(regionalization.district).html("");
var value = $(regionalization.city).children('option:selected').attr("value");
if (value == undefined) {
return;
}
var url = regionalization.url;
url += "&parentId=" + value
$.ajax({
type: "post",
url: url,
data: {},
success: function (msg) {
if (msg.status == 1) {
var obj = msg;
//alert(obj.data[0].regionalizationID)
for (var i = 0; i < obj.data.length; i++) {
$(regionalization.district).append("<option value=" + obj.data[i].RegionalizationID + ">" + obj.data[i].Name + "</option>");
}
if (regionalization.callback != null) {
var value = $(regionalization.district).children('option:selected').attr("value");
regionalization.callback(value);
}
}
else {
alert(msg.msg);
}
}
})
}
};

$(regionalization.province).bind("change", regionalization.selectCity);      $(regionalization.city).bind("change", regionalization.selectDistrict);
这里绑定了省级、市级下拉改变的事件，当数据改变则调用jajx重新请求数据。

动态加载数据使用了ajax异步请求： regionalization.url = “../../../tools/admin_ajax.ashx?action=regionalization_get_child”;

下面是处理请求的部分后台代码，返回的json字符串：

#region 省市区三级连动==================================
public void regionalization_get_child(HttpContext context)
{
ActionParam par = new ActionParam { Remark = "行政区划获取子节点" };
OpenSessionJson(context, (iSession) =>
{
string strParentId = DTRequest.GetQueryString("parentId");
int? parentId = string.IsNullOrEmpty(strParentId) ? (int?)null : int.Parse(strParentId);

ERegionalization.Schema s = new ERegionalization.Schema();
List<ERegionalization> regions = QRegionalization.Get(
iSession
, s.ParentID == parentId
, s.Sort.ASC().ASC(s.Code));
par.Data = ToJson<ERegionalization>(regions);
}, par);
}
#endregion

后台主要通过parentId字段查询数据表里面的行政区划子节点，如果省级则parentId为空，下一级则通过上一级选中的id作为parentId进行查询。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 数据三级联动 c# 控件

相关文章推荐

新的分享

章节导航