ASP.NET web form 使用jQuery ajax 省市级联

最新推荐文章于 2019-12-03 09:15:27 发布

情傷

最新推荐文章于 2019-12-03 09:15:27 发布

阅读量971

点赞数

CC 4.0 BY-SA版权

分类专栏： Web json Jquery WebService 文章标签： .net .NET .Net ajax AJAX Ajax jquery jQuery JQUERY Jquery JQuery 省市级联

本文链接：https://blog.youkuaiyun.com/zhengwei804/article/details/8228150

Web 同时被 3 个专栏收录

5 篇文章

订阅专栏

Jquery

3 篇文章

订阅专栏

json

2 篇文章

订阅专栏

本文介绍了一个基于Web服务的地区选择功能实现，包括省市区的联动选择、AJAX异步加载数据以及后台服务的交互流程。通过JavaScript、HTML和Web服务共同协作，实现了动态加载省市区列表的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面HTML部分：

<table>
<tr>
                <td height="30" align="right">
                    省（市）：
                </td>
                <td>
                    <select id="selProvince">
                    </select>
                    <asp:HiddenField ID="hfProvinceID" runat="server" Value="-1" />
                </td>
            </tr>
            <tr>
                <td height="30" align="right">
                    市（区）：
                </td>
                <td>
                    <select id="selCity">
                        <option value="-1">请选择</option>
                    </select><asp:HiddenField ID="hfCityID" runat="server" Value="-1" />
                </td>
            </tr>
</table>

页面JS部分：

//加载省
            $.ajax({
                type: "post",
                url: "ProbationService.asmx/GetProvinceList",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    eval("var s = " + data.d + ";");
                    $(s).each(function() {
                        appendOptions("selProvince", $(this).get(0).ID, $(this).get(0).Name);
                    });
                    $("#selProvince").change(function() {
                        getCitys($(this).val());
                        $("#hfProvinceID").val($(this).val());
                    });
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('网络异常，请稍候重试！');
                }
            });
            //为指定的select添加option元素
            function appendOptions(appTo, val, text) {
                var s = document.createElement("option");
                s.value = val;
                s.text = text;
                $("#" + appTo).append($(s));
            }
            //根据省ID加载城市列表
            function getCitys(provinceID) {
                $.ajax({
                    type: "post",
                    url: "ProbationService.asmx/GetCityList",
                    contentType: "application/json; charset=utf-8",
                    data: '{ "provinceID":"' + provinceID + '"}',
                    dataType: "json",
                    success: function(data) {
                        eval("var s = " + data.d + ";");
                        $("#selCity").children().remove();
                        $("#selCity").append("<option value='-1'>请选择</option>");
                        $(s).each(function() {
                            appendOptions("selCity", $(this).get(0).ID, $(this).get(0).Name);
                        });
                        $("#hfCityID").val("-1");
                        $("#selCity").change(function() {
                            $("#hfCityID").val($(this).val());
                        });
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert('网络异常，请稍候重试！');
                    }
                });
            }

后台WebService部分：

namespace WebUI.Views.Probation
{
    /// <summary>
    /// ProbationService 的摘要说明
    /// </summary>
    [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 ProbationService : System.Web.Services.WebService
    {

        [WebMethod]
        public string GetProvinceList()
        {
            SqlDataReader sdr = SqlHelper.ExecuteReader(SqlHelper.ConnectionString3LocalTransaction, CommandType.Text, "SELECT [Name], [ID] FROM BaseDB.dbo.[tb_provinces]", null);
            List<ProvinceCity> list = new List<ProvinceCity>();
            while (sdr.Read())
            {
                list.Add(new ProvinceCity() { ID = sdr["ID"].ToString(), Name = sdr["Name"].ToString() });
            }
            return new JavaScriptSerializer().Serialize(list);
        }

        [WebMethod]
        public string GetCityList(int provinceID)
        {
            SqlDataReader sdr = SqlHelper.ExecuteReader(SqlHelper.ConnectionString3LocalTransaction, CommandType.Text, "select Name,ID from  BaseDB.dbo.tb_cities where provincesID  =" + provinceID, null);
            List<ProvinceCity> list = new List<ProvinceCity>();
            while (sdr.Read())
            {
                list.Add(new ProvinceCity() { ID = sdr["ID"].ToString(), Name = sdr["Name"].ToString() });
            }
            return new JavaScriptSerializer().Serialize(list);
        }
    }
    public class ProvinceCity
    {
        public string Name { get; set; }
        public string ID { get; set; }
    }
}