ajax实现的级联范例代码

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/