级联查询ajax,Jquery+Ajax下拉框级联查询

Jquery代码

$(function(){

//提交事件

$("#ImageButton1").click(function(){

//省Id

var provinceId=$("#selProvince").val();

//市Id

var cityId=$("#selCity").val();

//区县Id

var districtId=$("#selDistrict").val();

//把省市区ID赋值到隐藏域

$("#hidProvince").attr("value",provinceId);

$("#hidCity").attr("value",cityId);

$("#hidDistrict").attr("value",districtId);

});

//加载地区

var area=$("#hidArea").val();  //后台将(省，市，区)ID放到隐藏域hidArea

//         alert(area);

loadArea(0,0,area);//Ajax方法查询默认(北京，北京，朝阳)

$("#selProvince").change(function(){//存放省的下拉框发生变化时调用Ajax

loadArea(this.value,1,"");

});

$("#selCity").change(function(){//存放市的下拉框发生变化时调用Ajax

loadArea(this.value,2,"");

});

//id:省(0)市县id，type：0为省，1为市，2县，area：北京,北京,朝阳区

function loadArea(id,type,area){

$.ajax({

type:"get",

url:"/ashx/GetArea.ashx",

data:{Id:id,type:type},

dataType:"json",

success:function(data){

var str="";

var areaArr=area.split(",");

if(type==0){

$.each(data,function(i,item){

str=str+""+item.Name+"";

})

var selProvince=$("#selProvince");

selProvince.html(str);

if(areaArr[0])

{

selProvince.val(areaArr[0]);

}

loadArea(selProvince.val(),1,area);

}

if(type==1){

$.each(data,function(i,item){

str=str+""+item.Name+"";

})

var selCity=$("#selCity");

selCity.html(str);

if(areaArr[1])

{

selCity.val(areaArr[1]);

}

loadArea(selCity.val(),2,area);

}

if(type==2){

$.each(data,function(i,item){

str=str+""+item.Name+"";

})

var selDistrict=$("#selDistrict");

selDistrict.html(str);

if(areaArr[2])

{

selDistrict.val(areaArr[2]);

}

//$("#selDistrict")

}

}

});

}

aspx页面代码

填写联系地址： *

一般处理程序 源码

using System;

using System.Collections;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

using BLL;

using Newtonsoft.Json;

using System.Collections.Generic;

using Model;

using Common;

using Model.Linq;

namespace Web.ashx

{

///

/// $codebehindclassname$ 的摘要说明

///

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class GetArea : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

int id = 0;

string strId = context.Request.QueryString["Id"];

//类型：省0，市1，县2

string type = context.Request.QueryString["type"];

if (!string.IsNullOrEmpty(strId))

{

id = Convert.ToInt32(strId);

}

phDataContext ph = new phDataContext();

string result = "";

if (type == "0")

{

result = ConvertHelper.DataToJson(ph.Province.Select(p=> new { p.Id, p.Name}));

context.Response.Write(result);

}

if (type == "1")

{

result = ConvertHelper.DataToJson(ph.City.Where(c => c.ProvinceId == id).Select(c => new { c.Id,c.Name }));

context.Response.Write(result);

}

if (type == "2")

{

result = ConvertHelper.DataToJson(ph.District.Where(c => c.CityId == id).Select(d => new { d.Id, d.Name }));

context.Response.Write(result);

}

//context.Response.Write(result);

}

public bool IsReusable

{

get

{

return false;

}

}

}

}

后台代码

//这个就是给hidArea隐藏域赋值

if (!pm01.Area.IsNullOrEmptyOrWhiteSpace())

{

//this.hidArea.Value = pm01.Area;

hidArea.Value = pm01.ProvinceId + "," + pm01.CityId + "," + pm01.DistrictId;

}

自从用了ajax就停不下来了  (ˇˍˇ) 想～

ajax,下拉框级联

js代码: $(document).ready(function() { $("#type1").change(function(){ var type1Code=$(" ...

Java Swing应用程序 JComboBox下拉框联动查询

在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡:

jQuery对下拉框Select操作总结

jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

layui select 下拉框 级联 动态赋值 与获取选中值

//下拉框必须在 class="layui-form" 里 不然监听事件没有作用

jquery div 下拉框焦点事件

这章与上一张类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

Jquery操作下拉框(DropDownList)实现取值赋值

Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

jquery 获取下拉框值与select text

下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

js,jquery获取下拉框选中的option

js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)

Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

随机推荐

Android Service

一.在MainAcitivity界面启动Service  : public class MyService extends Service intent = new Intent(MainActivi ...

Elasticsearch 5.0 —— Head插件部署指南

使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! 官方粗略教程 Running with built in server ...

CentOS7上让Jexus开机自启动

昨天刚用了一下CentOS7,很自然的就安装了mono和Jexus,用的都是目前最新版mono4.2.2.10和jexus5.8.0 mono和jexus的具体安装方法,园子里已经有了很多教程,这里就 ...

JDBC操作

String sql = "SELECT * from lib where name = ?";List list = getJdbcTemplate().q ...

有关mipmaps

Mipmaps的作用是什么,仅仅是为了使屏幕三角形和纹理三角形的差异变小?有没有以空间换时间的理念? Mipmaps在生成一系列小的纹理样本时, 是如何从原始纹理采样的?即如何生成这些小的纹理样本.

DATA GUARD架构(一)

Data Guard传输-应用架构.>图1-1 ------------------------------------------------------------ 重做传输架构>图1 ...

android 下载instagram动态中图片的demo

最近迷上了刷instagram,里面的很多照片都特别喜欢,于是就想分享到朋友圈或者微博,奈何墙外不知墙内苦啊.于是只能想办法将它们保存到本地,既可以做壁纸也能分享给别人. 我发现每条ins的动态在ap ...

POI导入数据

package util; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.I ...

codeforce 240E 最小树形图+路径记录更新

最小树形图的路径是在不断建立新图的过程中更新的,因此需要开一个结构体cancle记录那些被更新的边,保存可能会被取消的边和边在旧图中的id 在朱刘算法最后添加了一个从后往前遍历新建边的循环,这可以理解 ...

TCP/IP四层模型讲解笔记

本文转载自:http://www.vuln.cn/2041 OSI七层模型   表示层:用来解码不同的格式为机器语言,以及其他功能. 会话层:判断是否需要网络传输. 传输层:识别端口来指定服务器,如指 ...