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 List<Model.province> GetProvince()

{

BLL.province bpro = new BLL.province();

List<Model.province> list = bpro.GetListModel();

return list;

}

[WebMethod]

public List<Model.city> GetCityByPro(string proid)

{

BLL.city bcity = new BLL.city();

List<Model.city> list = bcity.GetListModel("father='" + proid + "'");

return list;

}

[WebMethod]

public List<Model.area> GetAreaByCity(string cityid)

{

BLL.area barea = new BLL.area();

List<Model.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层写了一些方法

时间: 2024-10-13 21:42:56

AJAX和WebService实现省市县三级联动具体代码的相关文章

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

-------------------------------------WebService1.asmx--------------------------------------- 复制代码 代码如下: // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebServ

ajax实现无刷新省市县三级联动_AJAX相关

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码,供大家参考,具体内容如下 效果图: 实现代码: 1.html: <html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/Jquery1.7.js" type="tex

ajax实现无刷新省市县三级联动

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码,供大家参考,具体内容如下 效果图: 实现代码: 1.html: <html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/Jquery1.7.js" type="tex

ajax实现省市县三级联动

问题描述 运用ajax技术从jsp页面读取数据源实现省市县三级联动!跪求解.

jquery读取xml文件实现省市县三级联动的方法

  本文实例讲述了jquery读取xml文件实现省市县三级联动的方法.分享给大家供大家参考.具体如下: 页面代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

Android使用android-wheel实现省市县三级联动_Android

今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为是Andriod内置的控件,google一把,发现是个github上的一个控件. 下载地址:https://code.google.com/p/android-wheel/    发现很适合做省市县三级联动就做了一个. 先看下效果图: 1.首先导入github上的wheel项目 2.新建个项目,然后选择记得右键->Properties->Android中将wheel添加为lib: 上面两个步骤是导入所有开源项目的过程了

jquery读取xml文件实现省市县三级联动的方法_jquery

本文实例讲述了jquery读取xml文件实现省市县三级联动的方法.分享给大家供大家参考.具体如下: 页面代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'city.jsp' starting p

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码_javascript技巧

像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

jQuery+jsp实现省市县三级联动效果(附源码)_jquery

本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法.分享给大家供大家参考,具体如下: 在这里,用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码) 使用过的jar包 google的Gson.jar mysql-connector-java-5.1.13-bin.jar 将实验图贴出来: 显示页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding=