Podrías hacerlo guardándolo en el LocalStorage.
Ejemplo JSFiddle:
<select name="seleccion" id="">
<option value="red">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
</select>
<div id="cuadro" style="width: 100px;height: 100px;">
</div>
<script>
if (typeof(localStorage) === "undefined") {
alert("no soporta localstorage")
}
if (localStorage.getItem('background-color')) {
let color = localStorage.getItem('background-color');
$("#cuadro").css("background-color", color);
$(`option[value="${color}"]`).attr('selected', 'selected');
}
$('select').on('change', function() {
//console.log( this.value );
if (this.value == 'red') {
$("#cuadro").css("background-color", "red");
localStorage.setItem('background-color', 'red');
} else if (this.value == 'green') {
$("#cuadro").css("background-color", "green");
localStorage.setItem('background-color', 'green');
}else{
$("#cuadro").css("background-color", "yellow");
localStorage.setItem('background-color', 'yellow');
}
});
</script>
Si lo deseas, puedes crear una función para mayor facilidad:
function local(attribute,value=null){
if(value)
return localStorage.setItem(attribute,value);
return localStorage.getItem(attribute);
}
// set property
local('background-color', 'yellow');
// get property
local('background-color');
submit
para que no recargue la página. supongo quieres mandar los datos albackend
sin recargar, cierto?