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

最新推荐文章于 2023-06-04 17:04:20 发布

YuanlongWang

最新推荐文章于 2023-06-04 17:04:20 发布

阅读量1.6k

点赞数

分类专栏： web前端开发文章标签： javascript 数据三级联动 c# 控件

本文链接：https://blog.csdn.net/lwpoor123/article/details/73608693

版权

web前端开发专栏收录该内容

35 篇文章 1 订阅

订阅专栏

之前写了一个三级联动选择自定义控件，分享给大家。
这是控件截图：
这里写图片描述
下面是代码：

测试页面代码:
<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" />
        <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进行查询。

YuanlongWang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
C# JavaScript自定义控件，省市区三级联动选择，动态加载数据

之前写了一个三级联动选择自定义控件，分享给大家。这是控件截图：下面是代码：测试页面代码:<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="../../../scripts/artdia
复制链接

扫一扫