功能：省，市，地区三级联动，采用jquery ajax 取数据绑定，页面刷新或提交后选定值能保存并保持选中状态

把以下代码放在一个单独的js文件中，在页面上引用即可调用

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