javascript - 设置从服务器端加载的后退按钮的下拉值

Question

我有一个包含 4 个下拉列表的页面。当我选择第一个下拉列表时，Ajax 调用将过滤其他 3 个下拉列表数据，然后单击提交按钮显示第二页。现在，当我单击浏览器的后退按钮时第一页的下拉菜单必须保留之前填写的数据。只有第一个下拉菜单保留数据，其他 3 个下拉菜单不会填充之前选择的数据。为此，我在单击表单提交时设置 cookie，如下所示:

this.SetCookieForPriceGuide = function () {
        document.cookie = "VehicleMake=" + $("#VehicleMake").val();
        document.cookie = "VehicleYear=" + $("#VehicleYear").val();
        document.cookie = "VehicleModel=" + $("#VehicleModel").val();
        document.cookie = "VehicleDamage=" + $("#VehicleDamage").val();

    };

按钮单击事件中的 SetCookieForPriceGuide 和后退按钮上调用的加载函数，我尝试按如下方式设置下拉列表值

this.load = function () {
        var VehicleYear = getCookie("VehicleYear");
        var VehicleMake = getCookie("VehicleMake");
        var VehicleModel = getCookie("VehicleModel");
        var VehicleDamage = getCookie("VehicleDamage");
}

getCookie方法如下:

function getCookie(cookieValue) {
    var textValue = cookieValue + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(textValue) == 0) {
            return c.substring(textValue.length, c.length);
        }
    }
    return "";
}

Answer 1

您可以按如下方式设置下拉列表的选定值:

this.load = function () {
    setSelectedValue('ddl_VehicleYearId', getCookie("VehicleYear"), 'defaultValue');
    setSelectedValue('ddl_VehicleMakeId', getCookie("VehicleMake") 'defaultValue');
    setSelectedValue('ddl_VehicleModelId', getCookie("VehicleModel") 'defaultValue');
    setSelectedValue('ddl_VehicleDamageId', getCookie("VehicleDamage") 'defaultValue');
}

function setSelectedValue(dropdownId, cookieValue, defaultValue){
    var element = document.getElementById(dropdownId);
    if(cookieValue) // If cookie has value
        element.value = cookieValue;
    else    // set default value
        element.value = defaultValue;
}