JavaScript - Modificar el valor de los selects

Pos: 186

Val: 13

Modificar el valor de los selects

Publicado por unexes (39 intervenciones) el 19/01/2013 13:27:01

Hola a tod@s.

Vereis tengo 2 selects que se rellenan de una misma base de datos y cuando realizo algún cambio en la seleccion me actualiza la consulta hasta aqui todo perfecto, en el primer select selecciono una edad minima y en el segundo select la edad maxima, hasta ahora funciona bien ya que mi consulta muestra las personas que se encuentran entre la edad minima y maxima.

Mi problema es que tal como lo tengo puedo seleccionar una edad mayor en el select de la edad minima que el que selecciono en el de la edad maxima, para esplicarme mejor pongo un ejemplo:

Edad minima = 30 años

Edad maxima= 28 años.

Lo que necesito es que si en el select de edad maxima pongo una edad inferior a la que he seleccionado en edad minima el select de edad minima se ajuste igualando al de la edad maxima, ejemplo:

Selecciono edad minima= 30 años
Edad Maxima =28 años,
lo que necesito es que el valor del select de edad minima se ajuste a 28 años (mismo valor que el select de edad maxima) , ya que nunca pueda ser mayor el valor de edad minima que el valor de edad Maxima.

Se que tengo que utilizar javascript pero deconozco su programación si alguien me puede ayudar o decirme donde puedo encontrar un ejemplo se lo agradeceria, si creeis que debo poneros el código que tengo en estos momentos de los 2 selects no hay problema.

Un saludo

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Modificar el valor de los selects

Publicado por xve (2100 intervenciones) el 19/01/2013 18:49:02

Hola Unexes, nos puedes mostrar el código html... sin el mismo, es un poco dificil de ayudarte.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 186

Val: 13

Modificar el valor de los selects

Publicado por unexes (39 intervenciones) el 20/01/2013 11:10:32

Aquí os pongo el código de los 2 selects que forman parte de un menú con mas selects y checkbox que utilizo para filtrar mi consulta:

<select name="EdadMin" id="EdadMin" class="Guias3" Onchange="cargarContenido('Contenido.php')">

		<option value="-1" selected>&nbsp;&nbsp;&nbsp;18</option>

<?php

	$tablaedadmin = mysql_query("SELECT * FROM edad ORDER BY Edad ASC");

	while ($registroedadmin = mysql_fetch_array($tablaedadmin))

        if (empty($_GET["EdadMin"])<> '-1')

           echo "<option value='".$registroedadmin['Edad']."' selected>&nbsp;&nbsp;".$registroedadmin['Edad']."</option>";

       }else{

          echo "<option value='".$registroedadmin['Edad']."' >&nbsp;&nbsp;".$registroedadmin['Edad']."</option>";

	mysql_free_result($tablaedadmin);

?>

	</select>

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  <select name="EdadMax" id="EdadMax" class="Guias3" Onchange="cargarContenido('Contenido.php')">

		<option value="-1" selected>&nbsp;&nbsp;&nbsp;70</option>

<?php

	$tablaedadmax = mysql_query("SELECT * FROM edad ORDER BY Edad ASC");

	while ($registroedadmax = mysql_fetch_array($tablaedadmax))

        if (empty($_GET["EdadMax"])<> '-1')

           echo "<option value='".$registroedadmax['Edad']."' selected>&nbsp;&nbsp;".$registroedadmax['Edad']."</option>";

       }else{

          echo "<option value='".$registroedadmax['Edad']."' >&nbsp;&nbsp;".$registroedadmax['Edad']."</option>";

	mysql_free_result($tablaedadmax);

?>

	</select>

Aquí pongo la function: cargarContenido(pagina)

function cargarContenido(pagina)

                $("#contenido").html("<img src='clock.gif' class='clock' border='0' />");

        		$("#contenido").load(pagina, $("#filtrar").serialize());

Bueno espero me podais ayudar, como comente al principio no se casi nada de javascript, la function anterior la encontre en la red y la adapte, de hecho he estado buscando alguna funcion en la red para lo que os estoy pidiendo ayuda, pero no he encontrado nada, aunque deben de haber un puñao de ejemplos, si no me podeis ayudar directamente os agradeceria que me indicarais donde puedo encontrar algún ejemplo y intentare adaptarlo.

Gracias.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Modificar el valor de los selects

Publicado por xve (2100 intervenciones) el 20/01/2013 20:38:40

Hola Unexes, gracias por mostrarnos el código, así es un poco mas sencillo.

He revisado un poco tu código, y creo que lo tienes bastante sencillo.... en la función cargarContenido() que se ejecuta cada vez que se selecciona un valor de los desplegables puedes controlarlo.

Prueba algo así:

function cargarContenido(pagina)

    if($("#EdadMin").val()>$("#EdadMax").val())

        $("#EdadMin").val()=$("#EdadMax").val();

    $("#contenido").html("<img src='clock.gif' class='clock' border='0' />");

    $("#contenido").load(pagina, $("#filtrar").serialize());

Coméntanos, ok?

Valora esta respuesta

Comentar

Pos: 186

Val: 13

Modificar el valor de los selects

Publicado por unexes (39 intervenciones) el 21/01/2013 10:11:41

Gracias xve.

No funciona, te comento, en primer lugar no me cambia los valores de los desplegables, es mas mientras no utilizo el filtrado por edad minima y maxima la página sigue funcionando bien filtrando por el resto de desplegables, pero en cuanto utilizo cualquiera de los deplegables de EdadMin o EdadMax aparte de como te he comentado al principio, no me ajusta los valores de los mismos, me bloquea la consulta ya que aunque utilice otros desplegables despues para seguir filtrando el contenido de la consulta, esta permanece invariable.
No me indica ningún error, no me bloquea la página simplemente deja de filtrar, la unica opción a partir de ese momento es salir de la página y volver a entrar para poder filtrar de nuevo.
Sin el añadido que me aconsejas que pusiera en la function cargarContenido(pagina) funciona todo bien salvo que no me ajusta los valores de EdadMin y EdadMax y si coloco logicamente un valor superior en EdadMin al que pongo en EdadMax no me encuentra ningún registro.

Por si te sirve de algo para encontrar el problema la function cargarContenido(pagina) se encuentra en otra página distinta de donde se encuentran los selects y checkbox de filtrado y todos mis filtros llaman a esta function.

Yo estoy haciendo pruebas y mirando la idea que me has dado a ver si encuentro donde puede estar el problema pero como ya te comente de javascript conozco poquisimo.

De nuevo muchas gracias y un saludo.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Modificar el valor de los selects

Publicado por xve (2100 intervenciones) el 21/01/2013 11:42:47

unexes, mil perdones, he cometido un error... en vez de ser:

$("#EdadMin").val()=$("#EdadMax").val();

tiene que ser:

$("#EdadMin").val($("#EdadMax").val());

He hecho una pequeña prueba para comprobarlo...

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

    function cargarContenido(pagina)

        if($("#EdadMin").val()>$("#EdadMax").val())

            $("#EdadMin").val($("#EdadMax").val());

</script>

</head>

<body>

<div>

    Min:

    <select name="EdadMin" id="EdadMin" class="Guias3" Onchange="cargarContenido('Contenido.php')">

        <option value="18" selected>&nbsp;&nbsp;&nbsp;18</option>

        <option value='20' selected>20</option>";

        <option value='30' selected>30</option>";

        <option value='40' selected>40</option>";

    </select>

</div>

<div>

    Max:

    <select name="EdadMax" id="EdadMax" class="Guias3" Onchange="cargarContenido('Contenido.php')">

        <option value="18" selected>&nbsp;&nbsp;&nbsp;18</option>

        <option value='20' selected>20</option>";

        <option value='30' selected>30</option>";

        <option value='40' selected>40</option>";

    </select>

</div>

</body>

</html>

Valora esta respuesta

Comentar

Pos: 186

Val: 13

Modificar el valor de los selects

Publicado por Unexes (39 intervenciones) el 22/01/2013 14:33:07

Gracias xve por el esfuerzo y las molestias que te estas tomando.

Veras ya funciona de forma aparentemente BIEN, pero he descubierto que solo lo hace aparentemente, para el tema en el que me estas ayudando sobre la edad minima y la edad maxima funciona perfectamente ya que todas las cantidades con las que se rellena el select tienen 2 digitos, pero tengo necesidad de poner otros pares de selects por ejemplo (Precio Minimo y Precio Maximo) y estos selects se rellenan igual que los anteriores de una tabla lo que cambia son los valores ejemplo: (los hay de 2 digitos 30 ó 40 de 3 digitos 300 etc.. y de cuatro digitos 2345 por ejemplo) y es aqui donde falla ya que en este caso cuando se selecciona en Maximo 300 en minimo no permite seleccionar nada por debajo que tenga 2 digitos excepto que seleccionaramos 30 cuyos 2 primeros digitos coinciden con 300, pero no me permite seleccionar 40.
Para ahorrar esplicaciones he modificado la prueba que me adjuntaste y al final te comento.

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

    function cargarContenido(pagina)

        if($("#PreMin").val()>$("#PreMax").val())

            $("#PreMin").val($("#PreMax").val());

	    if($("#EdadMin").val()>$("#EdadMax").val())

            $("#EdadMin").val($("#EdadMax").val());

</script>

</head>

<body>

<div>

    PreMin:

    <select name="PreMin" id="PreMin" class="Guias3" Onchange="cargarContenido('Contenido.php')">

        <option value='20' selected>20</option>

        <option value='30'>30</option>

        <option value='40'>40</option>

        <option value='300'>300</option>

        <option value='350'>350</option>

        <option value='400'>400</option>

        <option value='2345'>2345</option>

    </select>

</div>

<div>

    PreMax:

    <select name="PreMax" id="PreMax" class="Guias3" Onchange="cargarContenido('Contenido.php')">

        <option value='20'>20</option>

        <option value='30'>30</option>

        <option value='40'>40</option>

        <option value='300'>300</option>

        <option value='350'>350</option>

        <option value='400'>400</option>

        <option value='2345' selected>2345</option>

    </select>

</div>

<div>

    Min:

    <select name="EdadMin" id="EdadMin" class="Guias3" Onchange="cargarContenido('Contenido.php')">

        <option value='18' selected>18</option>

        <option value='20'>20</option>

        <option value='30'>30</option>

        <option value='40'>40</option>

    </select>

</div>

<div>

    Max:

    <select name="EdadMax" id="EdadMax" class="Guias3" Onchange="cargarContenido('Contenido.php')">

        <option value='18'>18</option>

        <option value='20'>20</option>

        <option value='30'>30</option>

        <option value='40' selected>40</option>

    </select>

</div>

</body>

</html>

Veras de entrada hay seleccionado Precio minimo 20 y Precio maximo 2345, como comprobaras si seleccionas cualquier cantidad en precio minimo no te la admite porque ninguna cantidad tiene 4 digitos.
Si reducimos el Precio maximo a 400 En precio minimo admite cualquier cantidad inferior, pero si reducimos el Precio maximo a 300 En precio minimo solo admite 30 o 20 no admite 40 ya que compara partiendo desde los 2 primeros digitos.
Resumiendo: Comprueba el funcionamiento del código que te adjunto que es una ampliación del que tan amablemente me has enviado y comentame que crees que es lo que pasa.
Por mi parte mientras intentare encontrar indagando en la red la forma de solucionarlo.
Gracias xve

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Modificar el valor de los selects

Publicado por xve (2100 intervenciones) el 23/01/2013 07:28:19

Hola Unexes, ya he visto donde esta el error...

el problema, es que al hacer la comparación, la estábamos haciendo a modo de cadena no como entero (int)... modifica la función por esta:

function cargarContenido(pagina)

        if(parseInt($("#PreMin").val())>parseInt($("#PreMax").val()))

            $("#PreMin").val($("#PreMax").val());

        if(parseInt($("#EdadMin").val())>parseInt($("#EdadMax").val()))

            $("#EdadMin").val($("#EdadMax").val());

Coméntanos, ok?

Valora esta respuesta

Comentar

Pos: 186

Val: 13

Modificar el valor de los selects

Publicado por Unexes (39 intervenciones) el 23/01/2013 09:38:40

Genial xve

Muchas gracias por tu ayuda, funciona perfectamente y ya lo he implementado en mi código.

Te voy a pedir un pequeño favor, me podrias aconsejar algún libro o manual - si se encuentra en la red mucho mejor - para aprender Javascript desde cero, ya que como te comente al principio de este post no se utilizar javascript y me gustaria aprender.

Hace unos días quise en lugar de utilizar 2 selects para la edad y 2 para el precio, utilizar el "Slider Range de JQuery ui", http://jqueryui.com/slider/#range, me lei la documentación que le acompaña y incluso lo implemente en mi código y por culpa de no saber pasar los valores seleccionados en el slider a mi consulta, lo tuve que desechar.

Muchas gracias por todo.

Valora esta respuesta

Comentar

Suma de cantidades en cajas de texto

Obtener dato desde un iframe