jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态

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

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

。 代码如下:

//获取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");

   nbsp;     }
    }

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

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