1

Tengo un select con dos option, lo que hace ahora es hacer display none and block dependiendo del valor del select. El problema que tengo es que cuando le doy al botón de guardar la pagina se recarga y se pierde el valor que estaba seleccionado. Dejo el código que tengo por ahora.

$('select').on('change', function() {
//console.log( this.value );
if(this.value == 'comp'){
    $('#empl_id').css("display", "none");
    $('div#comp_id').css("display", "block");
}else if(this.value == 'empl'){
    $('div#com_id').css("display", "none");
    $("#empl_id").css("display", "block");
}
});
4
  • Tendrías que evitar el submit para que no recargue la página. supongo quieres mandar los datos al backend sin recargar, cierto? Commented el 27 jun. 2019 a las 15:06
  • Al guardar el envio lo hace via ajax??? o por form:submit???
    – Kamousagi
    Commented el 27 jun. 2019 a las 15:08
  • Tengo unos filtros, lo hago via ajax. No se podria guardar el ultimo value y asignarlo cuando se actualiza la pagina?
    – David
    Commented el 27 jun. 2019 a las 15:09
  • Las preguntas que buscan ayuda con la depuración de código deben incluir un ejemplo mínimo verificable.
    – Rubén
    Commented el 27 jun. 2019 a las 15:40

1 respuesta 1

5

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');

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.