ajax实现的级联实例代码:
级联效果在很多网站都有应用,比如省市县级联效果,很多时候直接将省市等内容静态写入代码,也有些时候从数据库读写,下面是一段利用ajax实现的级联效果代码,希望能给需要的朋友带来一定的帮助。
代码如下:
//获取cookie值 function readCookie(name) { var cookieValue=""; var search=name+"="; if(document.cookie.length>0) { offset=document.cookie.indexOf(search); if(offset!=-1) { offset+=search.length; end=document.cookie.indexOf(";", offset); if(end == -1) end = document.cookie.length; cookieValue=unescape(document.cookie.substring(offset, end)) } } return cookieValue; } //保存cookie值 function writeCookie(name, value, hours, escp) { var expire = ""; if(hours != null) { expire=new Date((new Date()).getTime() + hours * 3600000); expire = "; expires=" + expire.toGMTString(); } if(escp=="True") { document.cookie = name + "=" + value + expire; } else { document.cookie = name + "=" + escape(value) + expire; } } //省市区,流域,水系,断面条件选择 $(function(){ var $ddlprovince = $("#ddlProvince"); //省份 var $ddlcity = $("#ddlCity"); //城市 var $ddlarea = $("#ddlAreaName"); //区域 //根据省份查询城市 //$ddlprovince.focus(); //不要加focus,否则设置selected有问题 $ddlprovince.bind("change keyup",function() { if($(this).val() != "-1") { loadWater($(this).val(), "SelectCity"); } else { $("select[id$=ddlCity] > option").remove(); $ddlcity.append($("<option></option>").val("-1").html("--请选择--")); } //从新选择省份或者从新选择城市都会初始化区域 $("select[id$=ddlAreaName] > option").remove(); $ddlarea.append($("<option></option>").val("-1").html("--请选择--")); }); //如果城市没有填充数据,省份有选择数据则加载数据 if($("select[id$=ddlCity] > option").length == 1 && $ddlprovince.val() != "-1") { loadWater($ddlprovince.val(), "SelectCity"); //读cookie,有值则设为选中状态 var cityname = readCookie("JQ_CityName"); if (cityname != null && cityname != "undefined" && cityname != "") { $("select[id$=ddlCity] > option[value='" + cityname + "']").attr("selected", "true"); } } //根据城市查询区域 //$ddlcity.focus(); $ddlcity.bind("change keyup",function(){ if($(this).val() != "-1") { loadWater($(this).val(), "SelectAreaName"); //选中值存cookie writeCookie("JQ_CityName", $(this).val(), 0.5, true); } else { $("select[name$=ddlAreaName] > option").remove(); $ddlarea.append($("<option></option>").val("-1").html("--请选择--")); } }); //如果区名没有填充数据,城市有选择数据则加载数据 if($("select[id$=ddlAreaName] > option").length == 1 && $ddlcity.val() != "-1") { loadWater($ddlcity.val(), "SelectAreaName"); //读cookie,有值则设为选中状态 var areaname = readCookie("JQ_AreaName"); if (areaname != null && areaname != "undefined" && areaname != "") { $("select[id=ddlAreaName] > option[value='" + areaname + "']").attr("selected", "true"); } } $ddlarea.bind("change keyup",function(){ if($(this).val() != "-1") { //选中值存cookie writeCookie("JQ_AreaName", $(this).val(), 0.5, true); } }); }); function loadWater(selectedItem, typename){ $.ajax({ type: "GET", url: "/GetWaterxiname.ashx", data: { usetype: typename, id: selectedItem }, contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: function Success(data){ bindWater(data, typename); } }); } function bindWater(data, typename){ if(typename == "SelectCity") //绑定城市 { $("select[name$=ddlCity] > option").remove(); //删除原有的option $("select[id$=ddlCity]").append($("<option></option>").val("-1").html("--请选择--"));[/size] for (var i = 0; i < data.length; i++) { $("select[id$=ddlCity]").append($("<option></option>").val(data[i].City).html(data[i].City)); } } else if(typename == "SelectAreaName") { $("select[name$=ddlAreaName] > option").remove(); //删除原有的option $("select[id$=ddlAreaName]").append($("<option></option>").val("-1").html("--请选择--")); for (var i = 0; i < data.length; i++) { $("select[id$=ddlAreaName]").append($("<option></option>").val(data[i].AreaName).html(data[i].AreaName)); } } }
以上代码仅仅是一个参考,并没有实例演示,需要的朋友可以自行分析一下代码。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10389
更多内容可以参阅:http://www.softwhy.com/jquery/