发布：2023/2/5 18:18:53作者：管理员 来源：本站 浏览次数：664

以下就是asp.net mvc 中使用JS实现省市县三级无刷新联动实例部分源代码

<div class="form-group clearfix" id="cityAddress">

</div>

<script type="text/html" id="template">
    <option value="{{value}}">{{label}}</option>
</script>
@section scripts{
        
        <script>
            $(function () {
                //$('#myInfo a:last').tab('show');//初始化显示哪个tab
                $('#myInfo a').click(function (e) {
                    e.preventDefault();//阻止a链接的跳转行为
                    $(this).tab('show');//显示当前选中的链接及关联的content
                    $('#myInfo li').removeClass('active');
                    $(this).parent().addClass("active");
                });
                $("#btn_userinfo_submit").click(function () {
                    $.ajax({
                        url: "Privacy/UserInfoForm",
                        type: "post",
                        data: $("#form1").serialize(),
                        dataType: "json",
                        success: function (data) {
                            console.log("成功");
                            console.log(data);
                        },
                        error: function (e) {
                            console.log("系统出错！");
                            console.log(e.error);
                        }
                    })
                });

                $('#datetimepicker').datetimepicker({
                    language:  'zh-CN',
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0,
                    pickerPosition:'bottom-right'//日期插件弹出的位置
                });
                var area={
                        AreaList: [],
                        ProvIdList:[],
                        CityIdList:[],
                        GetArea:function(){
                            $.ajax({
                            url: "https://payapi.begon.cn/api/Common/GetAreas",
                                type: "post",
                                data: null,
                                dataType: "json",
                                success: function (data) {
                                    console.log(data);
                                    console.log("成功");
                                    area.AreaList=data.data;
                                    console.log(data.data);
                                    area.LoadArea();
                                },
                                error: function (e) {
                                    console.log("系统出错！");
                                    console.log(e.error);
                                }
                            });
                        },
                        mtp1:function(tp1, data){
                            var tp1 = document.getElementById(tp1).innerHTML;
                            var exp = /{{(.*?)}}/g;
                           
                            var ss= exp.exec(tp1);
                            console.log(ss);
                            while(result = exp.exec(tp1)){
                                if(result[1]){
                                    tp1 = tp1.replace(result[0], data[result[1]]);
                            
                                }
                            }
                            return tp1;
                        },
                        myRender:function(template, person) {
                          let reg = /{{(.*?)}}/g
                          var tp1 = document.getElementById(template).innerHTML;
                          let res = tp1.replace(reg, (item, key) => {
                            console.log(key, item)
                            return person[key]
                          })
                          console.log(res)
                          return res
                        },
                        LoadArea:function(){
                            area.AreaList.forEach(function(v){
                                $("#ProvId").append(area.myRender("template", v));
                            });
                        },
                        LoadOption: function (id,d,s) {
                            $("#" + id).html('');
                            d.forEach(function (v) {
                                var _d = v.children;
                                if (s == 1) area.CityIdList = _d;
                                _d.forEach(function (v) {
                                    $("#" + id).append(area.myRender("template", v));
                                });
                            });
                        }
                };
                area.GetArea();
                $("#ProvId").change(function(){
                    var id=$(this).val();
                    var d = area.AreaList.filter(p => p.value==id);
                    area.LoadOption('CityId', d,1);
                    $("#CityId").change();
                });

                $("#CityId").change(function () {
                    var id=$(this).val();
                    var d = area.CityIdList.filter(p => p.value == id);
                    area.LoadOption('AreaId', d,2);
                });

            });

        </script>
}