На странице обратные параметры формы несовместимы

Question

Булыжник вместе с формой, в которой выбор из первого выпадающего меню влияет на то, какие параметры отображаются во втором раскрывающемся списке.

Сценарий:

$(document).ready(function(){ 
$('#sashcolour').on('change', function() { 
    if($(this).val() === "Emerald"|| 
    $(this).val() === "Hot Pink"|| 
    $(this).val() === "Red") 
    { 
    $("#printall").show().prop('disabled', false); 
    } 
    else 
    { 
    $("#printall").hide().prop('disabled', true); 
    } 
    if($(this).val() === "White"|| 
    $(this).val() === "Baby Pink"|| 
    $(this).val() === "Baby Blue") 
    { 
    $("#printlight").show().prop('disabled', false); 
    } 
    else 
    { 
    $("#printlight").hide().prop('disabled', true); 
    } 
    if($(this).val() === "Black"|| 
    $(this).val() === "Royal Blue"|| 
    $(this).val() === "Purple") 
    { 
    $("#printdark").show().prop('disabled', false); 
    } 
    else 
    { 
    $("#printdark").hide().prop('disabled', true); 
    } 
}); 

});

Моя проблема в том случае, если форма была отправлена, а затем пользователь возвращается через браузер кнопку назад первый выпадающий остается на пункте открыт, но второй возвращается к значениям по умолчанию. например, выпадающий список 1 - пользователь выбирает «черный» и видит в раскрывающемся списке следующие варианты: «белый», «золотой», «серебристый». , но ... когда форма отправлена ​​и пользователь нажимает выпадающее меню кнопки «Назад», отображается «черный», но выпадающий список 2 показывает «черный», «золотой», «серебристый» первый список опций.

У меня очень ограниченное знание и я просто не вижу, что я делаю неправильно. Любая помощь с благодарностью получила!

Answer 1

Ваш JS должен выполнить на загрузке страницы, чтобы получить правильное значение. Для этого запустите изменение, добавив .change() после прослушивания событий:

$(document).ready(function(){ 
    $('#sashcolour').on('change', function(){ 
     /* ... */ 
    }).change(); 
});