1

Tengo un formulario con un <select> con varias opciones dentro a modo de escoger el orden con el cual se mostrará la información que ve el usuario en pantalla:

<form method="get" action="busqueda.php" class="height-30 float-right ">
    <select id="orden"  name="orden">                            
        <option value="1">Hora: publicación más reciente</option>
        <option value="2">Precio: más bajo primero</option>
        <option value="3">Precio: más alto primero</option>
        <option value="4">Distancia: más cercano primero</option>            
        <option value="5">Relevancia</option>
        <option value="6">Urgentes</option>
    </select>
</form>

Al seleccionar una opción se ejecuta lo siguiente:

$('body').on('change', '#orden', function(){
    $(this).parents('form').submit();
});

Cuando el usuario selecciona la opción, por ejemplo, Precio: más bajo primero la búsqueda se actualiza y se muestra correctamente en orden.

Lo que pasa es que al recargarse la página la primera opción que aparece en el <select>es la primera Hora: publicación más reciente por lo que si el usuario quisiera ver la información con este orden no podría seleccionarlo ya que el código jQuery sólo hace el submitcuando el valor del <select> cambia.

¿Cómo podría hacer para que una vez seleccionado un valor, al recargar la página me lo mostrase como primera opción en el <select> y así poder elegir las otras opciones?

Adjunto imágenes para detallar el problema:

  1. Así se muestra el <select> por defecto al cargar la página opción por defecto

  2. El usuario selecciona una opción, por ejemplo Precio: más bajo primero seleccionamos una opción

  3. Al recargar la página sigue mostrando esto: se muestra la misma opción por defecto

  4. Querría que se mostrara esto:

lo que se tendría que mostrar

Espero haberme explicado bien

1
  • Se actualiza la página porque vas a hacer la petición al server y luego regresas? Commented el 2 jun. 2017 a las 13:53

3 respuestas 3

3

Lo que podrías hacer es ver si se ha enviado el valor del select en el GET (ya que veo que en tu form utilizas el método GET) mediante el siguiente código:

if(isset($_GET['orden'])){
    $orden = $_GET['orden'];
}

y a la hora de mostrar el select comprobar cada elemento si ha sido seleccionado de la siguiente forma:

<select id="orden"  name="orden">
    <option value="1" <?php echo (isset($orden) && ($orden == 1))? "selected" : ""; ?>>Hora: publicación más reciente</option>
    <option value="2" <?php echo (isset($orden) && ($orden == 2))? "selected" : ""; ?>>Precio: más bajo primero</option>
    <option value="3" <?php echo (isset($orden) && ($orden == 3))? "selected" : ""; ?>>Precio: más alto primero</option>
    <option value="4" <?php echo (isset($orden) && ($orden == 4))? "selected" : ""; ?>>Distancia: más cercano primero</option>            
    <option value="5" <?php echo (isset($orden) && ($orden == 5))? "selected" : ""; ?>>Relevancia</option>
    <option value="6" <?php echo (isset($orden) && ($orden == 6))? "selected" : ""; ?>>Urgentes</option>
</select>
2
  • Este método me va como anillo al dedo, muchas gracias Joacer :D
    – gmarsi
    Commented el 2 jun. 2017 a las 14:53
  • Me alegro de que te haya servido @gmarsi
    – Joacer
    Commented el 2 jun. 2017 a las 15:00
2

Se me ocurren dos maneras en que puedas resolver esto.

  1. Utilizando Ajax así evitar que tu página completa se recargue.

  2. Que después de ir al servidor (o hacer la búsqueda en esa misma página), guardar el valor del select en alguna variable y luego coompararla en los options del select para setearle un "selected".

Si los options que nos muestras los tienes en duro, entonces será necesario que agregues la condición a cada uno de ellos justo como lo muestra @Joacer.

1
  • 1
    Nunca he usado Ajax así que me he decantado por la segunda opción. Aún así investigaré un poco para implementarlo con Ajax, supongo que el no tener que recargar toda la página entera será más eficiente
    – gmarsi
    Commented el 2 jun. 2017 a las 14:56
1

si al escoger una opción la página se te recarga es porque estás recurriendo a una acción del controlador tal puede ser "buscar" en tu caso estás recogiendo el parámetro "orden" para hacer una búsqueda. Solo te falta virar el valor de orden para la vista junto con el resultado de la búsqueda y pasarlo como select-value en tu desplegable

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.