Ajax方法请求WebService实现多级联动

--Dal层方法
public class City
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int FatherId { get; set; }
    }

    public class CityDal
    {
        public List<City> SelectCity(int Pid)
        {
            string sql = "select * from city";
            List<City> list = DbHelper.GetTable<List<City>>(sql).Where(p=>p.FatherId == Pid).ToList();

            return list;
        }
    }

    

//Web服务页面
//**在WebService中需要取消注释和加上跨域，才能够调用到。**

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace Pull_down_List
{
    /// 

    /// WebService1 的摘要说明
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
     [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
        CityDal dal = new CityDal();
        [WebMethod]
        public List<City> SelectCity(int Pid)
        {
            return dal.SelectCity(Pid);
        }

    }
}

//Mvc显示页面

@{
    ViewBag.Title = "Index";
}
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
<h2>多级联动</h2>

<div class="form-inline">
    <div class="row">
        <div class="col-lg-12">
            <select class="form-control" id="select1" onchange="load2()">
                <option value="value">-请选择-</option>
            </select>
            <select class="form-control" id="select2" onchange="load3()">
                <option value="value">-请选择-</option>
            </select>
            <select class="form-control" id="select3">
                <option value="value">-请选择-</option>
            </select>
        </div>
    </div>
</div>

//Ajax实现调用
<script>
    $(function () {
        load1(0);
    })

    function load1(pid) {
        var o = { Pid: pid };

        $.ajax({
            url: "https://localhost:44328/WebService1.asmx/SelectCity",
            data: JSON.stringify(o),
            type: "post",
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                $(data.d).each(function () {
                    $("#select1").append('+ this.ID + '">' + this.Name + '');
                })
            }
        })
    }


    function load2() {
        var pid = $("#select1").val();
        var o = { Pid: pid };
        $("#select2").empty();
        $.ajax({
            url: "https://localhost:44328/WebService1.asmx/SelectCity",
            data: JSON.stringify(o),
            type: "post",
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                $(data.d).each(function () {
                    $("#select2").append('+ this.ID + '">' + this.Name + '');
                })
            }
        })
    }

    function load3() {
        var pid = $("#select2").val();
        var o = { Pid: pid };
        $("#select3").empty();
        $.ajax({
            url: "https://localhost:44328/WebService1.asmx/SelectCity",
            data: JSON.stringify(o),
            type: "post",
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                $(data.d).each(function () {
                    $("#select3").append('+ this.ID + '">' + this.Name + '');
                })
            }
        })
    }
</script>