ajax实现无刷新省市县三级联动
本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下
效果图：
实现代码：
1、html：
<html>
<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>
<input id="Text1" type="text" />
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input id="Text2" type="text" />
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input id="Text3" type="text" />
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td>
<input id="Text4" type="text" />
</td>
</tr>
<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>
2、WebService1.asmx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace 省市县三级联动
{
/// <summary>
/// WebService1 的摘要说明
/// </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 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;
}
}
}
在三层的Bll层中的city.cs和area.cs中分别添加以下属性
//city.cs：
public List<Model.city> GetListModel(string strsql)
{
return dal.GetListModel(strsql);
}
//area.cs：
public List<Model.area> GetListModel(string strsql)
{
return dal.GetListModel(strsql);
}
在三层的DAL层中的city.cs和area.cs中分别添加以下方法
//city.cs：
public System.Collections.Generic.List<Model.city> GetListModel(string strsql)
{
System.Collections.Generic.List<Model.city> list = new System.Collections.Generic.List<Model.city>();
DataTable dt = GetList(strsql).Tables[0];
foreach (DataRow row in dt.Rows)
{
Model.city mcity = new Model.city();
mcity.id = Convert.ToInt32(row["id"]);
mcity.cityID = row["cityID"].ToString();
mcity.cityname = row["cityname"].ToString();
list.Add(mcity);
}
return list;
}
//area.cs：
public System.Collections.Generic.List<Model.area> GetListModel(string strsql)
{
DataTable dt = GetList(strsql).Tables[0];
System.Collections.Generic.List<Model.area> list = new System.Collections.Generic.List<Model.area>();
foreach (DataRow row in dt.Rows)
{
Model.area marea = new Model.area()
{
id = Convert.ToInt32(row["id"]),
areaID = row["areaID"].ToString(),
areaname = row["areaname"].ToString()
};
list.Add(marea);
}
return list;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
-
ajax三级联动下拉菜单效果
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国地域: 北京的代号为11,那么子代号为11的便是北京时的市区, 也就是说根据主代号查询子代号: (3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端 显示页面非常简单,只需要一
-
asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi
-
AJAX和WebService实现省市县三级联动具体代码
-------------------------------------WebService1.asmx--------------------------------------- 复制代码 代码如下: // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebServ
-
jquery+ajax实现省市区三级联动效果简单示例
本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三
-
简单实现ajax三级联动效果
本文实例为大家分享了ajax三级联动效果展示的具体代码,供大家参考,具体内容如下 主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../wenjian/jquery-2.2.3.min.js"></sc
-
AJAX省市区三级联动下拉菜单(java版)
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum
-
ajax三级联动的实现方法
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如说北京吧,北京的代号是11,它下面的北京市副代号就11, 北京市的主代号是1101,北京市下面的地区副代号就是1101,调地区的时候可以根据主代号查询和它相同的副代号,就能查询出来 想要让三级联动的内容在页面显示,只需要在页面建一个div就可以了 <div id="sanji">
-
PHP+Mysql+Ajax+JS实现省市区三级联动
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
-
jQuery ajax实现省市县三级联动
下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法 第三步:写封装方法用JS 第四步:做个纯php处理页面,这个页面处理传过来的任何代号 首先我们要建立数据库: 这就是包含省,市,县的数据库. 下面我们就写主页面:sanji.php:
-
ajax.net +jquery 无刷新三级联动的实例代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></titl