• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    AJAX和WebService实现省市县三级联动具体代码
    -------------------------------------WebService1.asmx---------------------------------------
    复制代码 代码如下:

    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
    [WebMethod]
    public string HelloWorld()
    {
    return "Hello World";
    }
    [WebMethod]
    public ListModel.province> GetProvince()
    {
    BLL.province bpro = new BLL.province();
    ListModel.province> list = bpro.GetListModel();
    return list;
    }
    [WebMethod]
    public ListModel.city> GetCityByPro(string proid)
    {
    BLL.city bcity = new BLL.city();
    ListModel.city> list = bcity.GetListModel("father='" + proid + "'");
    return list;
    }
    [WebMethod]
    public ListModel.area> GetAreaByCity(string cityid)
    {
    BLL.area barea = new BLL.area();
    ListModel.area> list = barea.GetListModel("father='" + cityid + "'");
    return list;
    }

    ----------------------------------HTMLPage1.htm----------------------------
    复制代码 代码如下:

    html xmlns="http://www.w3.org/1999/xhtml">
    head>
    title>/title>
    style type="text/css">
    select
    {
    width: 150px;
    }
    /style>
    script src="js/Jquery1.7.js" type="text/javascript">/script>
    script type="text/javascript">
    $(function () {
    $.ajax({
    type: "post",
    contentType: "application/json",
    url: "WebService1.asmx/GetProvince",
    data: "{}",
    success: function (result) {
    var stroption = '';
    for (var i = 0; i result.d.length; i++) {
    stroption += 'option value=' + result.d[i].provinceID + '>';
    stroption += result.d[i].provincename;
    stroption += '/option>';
    }
    $('#seprovince').append(stroption);
    }
    })
    $('#seprovince').change(function () {
    $('#secity option:gt(0)').remove();
    $('#searea option:gt(0)').remove();
    $.ajax({
    type: "post",
    contentType: "application/json",
    url: "WebService1.asmx/GetCityByPro",
    data: "{proid:'" + $(this).val() + "'}",
    success: function (result) {
    var strocity = '';
    for (var i = 0; i result.d.length; i++) {
    strocity += 'option value=' + result.d[i].cityID + '>';
    strocity += result.d[i].cityname;
    strocity += '/option>';
    }
    $('#secity').append(strocity);
    }
    })
    })
    $('#secity').change(function () {
    $('#searea option:gt(0)').remove();
    $.ajax({
    type: "post",
    contentType: "application/json",
    url: "WebService1.asmx/GetAreaByCity",
    data: "{cityid:'" + $(this).val() + "'}",
    success: function (result) {
    var stroarea = '';
    for (var i = 0; i result.d.length; i++) {
    stroarea += 'option value=' + result.d[i].areaID + '>';
    stroarea += result.d[i].areaname;
    stroarea += '/option>';
    }
    $('#searea').append(stroarea);
    }
    })
    })
    })
    /script>
    /head>
    body>
    table>
    tr>
    td>
    地址
    /td>
    td>
    select id="seprovince">
    option>--请选择--/option>
    /select>

    select id="secity">
    option>--请选择--/option>
    /select>市
    select id="searea">
    option>--请选择--/option>
    /select>县
    /td>
    /tr>
    /table>
    /body>
    /html>


    注:用到了三层架构,dal层写了一些方法
    您可能感兴趣的文章:
    • jQuery ajax实现省市县三级联动
    • ajax实现无刷新省市县三级联动
    • Ajax实现省市县三级联动
    上一篇:ajax传递一个参数具体实现
    下一篇:Ajax中浏览器的缓存问题解决方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    AJAX和WebService实现省市县三级联动具体代码 AJAX,和,WebService,实现省,