Как сохранить значения выпадающего списка после выбора

Question

Нижеприведенный код предназначен для выбора двух выпадающих значений на странице, что отлично работает, однако, поскольку страница обновляется даже при выборе первого выпадающего списка, значения выпадающего списка не сохраняются.

Как сохранить выпадающие значения?

$(document).ready(function() { 
    $('.boxy').hide(); 
    var drop1Value = ''; 
    var drop2Value = ''; 
    var cntyS = getUrlVars()['cntry']; 
    var piS = getUrlVars()['PI']; 
    $("#drop1").on("change", function() { 
    var drop1Value = $('#drop1').val(); 

    if (drop1Value == "") { 
     $('#content').hide(); 
    } else { 
     drop1Value = $('#drop1').val(); 
    } 

    var bURL = document.location.origin + document.location.pathname + '?cntry=' + drop1Value + '&PI=' + piS; 
    window.location.href = bURL; 
    }); 

    $("#drop2").on("change", function() { 
    var drop2Value = $('#drop2').val(); 

    if (drop2Value == "") { 
     $('#content').hide(); 
    } else { 
     drop2Value = $('#drop2').val(); 
    } 

    var bURL = document.location.origin + document.location.pathname + '?cntry=' + cntyS + '&PI=' + drop2Value; 
    window.location.href = bURL; 
    }); 
}); 

function getUrlVars() { 
    var vars = [], 
    hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for (var i = 0; i < hashes.length; i++) { 
    hash = hashes[i].split('='); 
    vars.push(hash[0]); 
    vars[hash[0]] = hash[1]; 
    } 
    return vars; 
} 

Answer 1

jQuery поддерживает метод цепочки. Вы можете использовать, что для установки значения, как это:

$('myselector').on('...', function() {}).val(myValue) 

В вашем случае, это правильный код:

$(document).ready(function() { 
    $('.boxy').hide(); 
    var drop1Value = ''; 
    var drop2Value = ''; 
    var cntyS = getUrlVars()['cntry']; 
    var piS = getUrlVars()['PI']; 
    $("#drop1").on("change", function() { 
    var drop1Value = $('#drop1').val(); 

    if (drop1Value == "") { 
     $('#content').hide(); 
    } else { 
     drop1Value = $('#drop1').val(); 
    } 

    var bURL = document.location.origin + document.location.pathname + '?cntry=' + drop1Value + '&PI=' + piS; 
    window.location.href = bURL; 
    }).children('[value="'+cntyS+'"]').prop('selected', true); 

    $("#drop2").on("change", function() { 
    var drop2Value = $('#drop2').val(); 

    if (drop2Value == "") { 
     $('#content').hide(); 
    } else { 
     drop2Value = $('#drop2').val(); 
    } 

    var bURL = document.location.origin + document.location.pathname + '?cntry=' + cntyS + '&PI=' + drop2Value; 
    window.location.href = bURL; 
    }).children('[value="'+piS+'"]').prop('selected', true); 
}); 

function getUrlVars() { 
    var vars = [], 
    hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for (var i = 0; i < hashes.length; i++) { 
    hash = hashes[i].split('='); 
    vars.push(hash[0]); 
    vars[hash[0]] = hash[1]; 
    } 
    return vars; 
}