jquery ajax 下拉框三级无刷新联动，并保存保持选中值状态

功能：省，市，地区三级联动，采用jquery ajax 取数据绑定，页面刷新或提交后选定值能保存并保持选中状态
把以下代码放在一个单独的js文件中，在页面上引用即可调用
 --- code begin---

 //获取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=ddlWaterXiName] > option:contains('" + watername + "')").attr("selected", "true");

             $("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("--请选择--"));



         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));

         }

     }

} 

--- code end---
说明:省份数据在页面加载时绑定，页面提交后 省份值可以用 selectvalue取，市，区选中数据要用 Request["idname"] 获取