PHP - Buscar datos con combobox dependiendo lo seleccionado

Pos: 591

Val: 10

Buscar datos con combobox dependiendo lo seleccionado

Publicado por Diana (4 intervenciones) el 19/10/2018 17:08:50

Que tal estoy realizando un buscador y quisiera que al seleccionar la primera categoria por ejemplo ropa de mujer me muestre toda la ropa de mujer, y si en el segundo select elijo por ejmplo pantalones me muestre toda la ropa de mujer pero solo pantalones y asi sucesivamnete, pero al enviar enl primer valor y querer seleccionar el segundo mi informacin se pierde, ademas de que me pidieron no utilizar boton, espero y me puedan dar una idea de como resolverlo

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: 9

Val: 1.071

Buscar datos con combobox dependiendo lo seleccionado

Publicado por Yamil Bracho (888 intervenciones) el 19/10/2018 17:21:32

Creo que estas perdiendo la informacion porque estas haciendo un submit del formualrio.
Lo mas facil es que uses Ajax para hacer la llamada en cuanto actualizes el primer combo. En este link puedes conseguir mas detalles
https://www.jose-aguilar.com/blog/combos-dependientes-con-jquery-ajax-y-php/

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: 270

Val: 26

Buscar datos con combobox dependiendo lo seleccionado

Publicado por Fronfolio (10 intervenciones) el 19/10/2018 17:54:30

Es muy simple, solo es un select de 2 o 3 niveles a lo que vas es que necesitas de un campo para el otro me explico:

Seria algo como

PAÍS DEPARTAMENTO CIUDAD

el pais es individual pero el departamento depende del pais que se seleccione y la ciudad del departamento seleccionado.

La forma de hacer es muy simple si lo vas a hacer con php te recomendaría lo siguiente:

primero en el index de tu pagina tener cargado jquery y luego los tres select en el body, el primer select en tu caso ropa lo dejas tal cual con los datos predefinidos, el siguiente debe ir vació por que aquí es en donde actúa js con el siguiente codigo:

<script type="text/javascript">

	$(document).ready(function(){

		$("#ropa").change(function(){

			$.get("buscartiporopa.php","tiporopaid="+$("#ropa").val(), function(data){

				$("#tiporopa").html(data);

				console.log(data);

});

});

});

</script>

lo que hace este script es que cuando elijas un valor en el primer select envié el valor seleccionado de ese mismo a una pagina php en la cual se hace la búsqueda del siguiente dato, en la pagina php debe haber algo asi:

(EN MI CASO YO TRABAJO CON PDO SI QUIERES PUEDES MODIFICARLO SI SOLO USAS EL PHP NORMALITO JAJA)

<?php

include "conexion.php";

if(isset($_GET['tiporopaid']))

	$id=$_GET['tiporopaid'];

	$where="where tiporopa=$id";

	if($id=="")

                //esto es para que en caso de que no seleccione nada no traiga nada de nada ;p

	else

		$query=$cn->query("SELECT * FROM tiporopa $where")->fetchAll(PDO::FETCH_OBJ);

		if(count($query)>0)

			foreach ($query as $key)

				print "<option value='".$key->id."'>".$key->nombreropa."</option>";

		else

			print "<p> NO HAY ROPA DE ESTE TIPO </p>";

?>

y listo una vez elegido el tipo de ropa te traería la ropa asociada a ese tipo.

Espero que te sirva si tienes alguna duda no dudes en preguntar ;)

Suerte!

Valora esta respuesta

Comentar

Buscar datos con combobox dependiendo lo seleccionado

Publicado por Diana (1 intervención) el 19/10/2018 18:33:05

Que tal, gracias por responder.
Lo hare así y vere que sale
Gracias

Valora esta respuesta

Comentar

Pos: 270

Val: 26

Buscar datos con combobox dependiendo lo seleccionado

Publicado por Fronfolio (10 intervenciones) el 19/10/2018 18:43:39

Listo, si alguna duda ya sabes solo hay que decirla!

Suerte!

Valora esta respuesta

Comentar

Pos: 591

Val: 10

Buscar datos con combobox dependiendo lo seleccionado

Publicado por Diana (4 intervenciones) el 19/10/2018 19:21:37

Gracias por el aporte, fui yo la que no se explico bien. Lo que no logro es: tengo tres select, lo que tengo que lograr es que si selecciono una opcion del primero me muestre todo lo referente a esa categoria, pero si selecciono el segundo me muestre los resultados del primero pero con la condicion del dato elegido en el segundo select y que si selecciono un option del tercero se convine la consulta con los datos del primer select con la condicion del segundo mas la condicion del tercero. Y como no tengo que usar boton submit utilice onchange="this.form.submit()" en cada select, pero al elegir un option se pierde el dato del primero. Ejemplo: primer select Ropa: elijo dama me muestra toda la ropa de dama pero solo quiero ver las blusas, asi que en el segundo select elijo solo blusas asi que de la lista del primer select ahora solo se mostraran blusas, y ahora en el tercero que es color solo quiero que me muestre blusas rosas asi que selecciono esa opcion y ahora la lista queda en, ropa de mujer->blusas->color_rosa.

Valora esta respuesta

Comentar

Pos: 270

Val: 26

Buscar datos con combobox dependiendo lo seleccionado

Publicado por Fronfolio (10 intervenciones) el 19/10/2018 19:51:43

entonces lo que te di si esta bien, mira es lo mismo que esto:

El primer select no depende de nadie,
el segundo depende de lo que se elija en el primero y
el tercero depende de lo que se elije en el segundo.

lo que te di esta bien ahora que falta solo agregar el tercer select vació con una función extra de js así:

en el index de tu pagina deberías tener todo de la siguiente forma:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

<!-- ESTE ES EL PRIMER SELECT CON LOS CAMPOS QUE DISTE -->

<select name="ropa" id="ropa">

	<option value="1">HOMBRE</option>

	<option value="2">MUJER</option>

</select>

<select name="tipo" id="tipo">

</select>

<select name="color" id="color>

</select>

<script type="text/javascript">

	$(document).ready(function(){

		$("#ropa").change(function(){

			$.get("buscartiporopa.php","ropaid="+$("#ropa").val(), function(data){

				$("#tipo").html(data);

				console.log(data);

});

});

		$("#tipo").change(function(){

			$.get("buscarcolorropa.php","colorropaid="+$("#tipo").val(), function(data){

				$("#color").html(data);

				console.log(data);

});

});

});

</script>

</body>

</html>

Una vez ya tienes esto en el HTML, hay que hacer la parte de PHP que serian los select de 'tiporopa' y 'colorropa', esa es la información que se va a llenar en los select y va a ser traída de la base de datos.

Vamos a ver primero la conexion, sabiendo que yo trabajo en PDO yo la uso asi:

<?php

	$cn=new PDO("mysql:host=localhost;dbname=lavanderia","root","");

	$cn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

	$cn->exec("SET CHARACTER SET UTF8");

?>

Y ahora los dos PHP de los select que buscan la información:

El primero seria el de 'buscartiporopa.php' y seria así:

<?php

include "conexion.php";

if(isset($_GET['ropaid']))

	$id=$_GET['ropaid'];

	$where="where tiporopa=$id";

	if($id=="")

                //esto es para que en caso de que no seleccione nada no traiga nada de nada ;p

	else

		$query=$cn->query("SELECT * FROM tiporopa $where")->fetchAll(PDO::FETCH_OBJ);

		if(count($query)>0)

			foreach ($query as $key)

				print "<option value='".$key->id."'>".$key->nombreropa."</option>";

		else

			print "<p> NO HAY ROPA DE ESTE TIPO </p>";

?>

el segundo seria el de 'buscarcolorropa.php' y seria así:

<?php

include "conexion.php";

if(isset($_GET['tiporopaid']))

	$id=$_GET['tiporopaid'];

	$where="where colorropa=$id";

	if($id=="")

                //esto es para que en caso de que no seleccione nada no traiga nada de nada ;p

	else

		$query=$cn->query("SELECT * FROM colorropa $where")->fetchAll(PDO::FETCH_OBJ);

		if(count($query)>0)

			foreach ($query as $key)

				print "<option value='".$key->id."'>".$key->colorropa."</option>";

		else

			print "<p> NO HAY ROPA DE ESTE COLOR</p>";

?>

Y listo en tu base de datos deberías tener las tres tablas una llamada 'ROPA' la cual tenga una id y un nombre en tu caso seria un ejemplo de registro algo así:

id=1
nombre=hombre

Luego otra tabla que seria la de tiporopa que tenga una id,un tiporopa y un nombre y al igual un ejemplo seria algo asi:

id=1
tiporopa=1
nombre=corbata hombre

Y por ultimo la tabla de 'color' que debería tener una id,un tipo ropa y un nombre y de igual forma un ejemplo seria así:

id=1
tiporopa=1
color= rojo

Esto lo que hace es asociar una tabla con otra y al hacer el uso de los select todo quedaría funcionando míralo bien y veras que es muy simple de hacer y a su vez muy efectivo.

Espero haber sido de ayuda!

Valora esta respuesta

Comentar

Pos: 591

Val: 10

Buscar datos con combobox dependiendo lo seleccionado

Publicado por Diana (4 intervenciones) el 20/10/2018 00:35:45

Tengo algo asi no se si este bien, mi problema son los this.form.submit porque al enviar uno se pierden los demas, en si mis consultas son a una sola tabla

<!DOCTYPE html>

<html>

<head>

	<title></title>

</head>

<body>

	<form action="" method="POST">

		<select id="ropa" name="ropa" onchange="this.form.submit()">

			<option>Caballero</option>

			<option>Dama</option>

		</select>

		<select id="tipo" name="tipo">

			<option>camisas</option>

			<option>faldas</option>

			<option>blusas</option>

			<option>pantalones</option>

		</select>

		<select id="color" name="color">

			<option>azul</option>

			<option>verde</option>

			<option>rojo</option>

		</select>

	</form>

	<table>

		<tr>

			<th>Departamento</th>

			<th>Tipo</th>

			<th>Color</th>

		</tr>

	<?php

		include("conexion.php");

		$con = mysqli_connect($host, $usu, $cont, $bd);

		$ropa= $_POST["ropa"];

		$tipo= $_POST["tipo"];

		$color= $_POST["color"];

		if ($ropa!=null) {

			$sql="SELECT * FROM closet WHERE ropa='$ropa'"; //si solo se selecciono ropa, que muestre en la tabla toda la ropa en general con sus respectivas descripciones de tipo y color

		}else if ($ropa!=null & $tipo!=null) {

			$sql = "SELECT * FROM closet WHERE ropa='$ropa' AND tipo='$tipo'"; //en caso de que se seleccionen dos option que muestre la ropa y un tipo

		}else if ($ropa!=null & $tipo!=null & $color!=null) {

			$sql = "SELECT * FROM closet WHERE ropa='$ropa' AND tipo='$tipo' AND color='$color'"; //si son los tres elegidos que muestre solo un tipo de ropa y color

		}else{

			$sql = "SELECT * FROM closet WHERE ropa='$ropa' OR tipo='$tipo' OR color='$color'";// en caso de que no, que se puedan buscar por cualquiera de los 3

		$result=mysqli_query($con,$sql);

		while ($row=mysqli_fetch_array($result)) {

			$a= $row["ropa"]; //hombre o mujer

			$b= $row["tipo"];

			$c= $row["color"];

?>

	<tr>

	    <td> <?php echo $a?> </td>

	    <td> <?php echo $b?> </td>

	    <td> <?php echo $c?> </td>

	</tr>

	<?php }?>

</body>

</html>

Realmente no he encontrado una solucion

Valora esta respuesta

Comentar

Sistema de mantenimientos

Variables en html