¿Intentas mostrar un select dependiendo de otro select?
En este sencillo ejemplo aprenderás a crear selects dependientes. En ocasiones necesitamos un select con una categoría y al momento de seleccionar esa categoría poder mostrar subcategorías de esta sin actualizar la página.
¿Cómo comenzamos?. Lo primero que tenemos que hacer es incluir la libreria de jquery para poder trabajar con Ajax en nuestra etiqueta
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>Ahora crearemos nuestro formulario:
<form class="row form" action="" method="post">
<div class="form-group col-lg-3">
<label for="category">Producto</label>
<select name="category" id="category" class="form-control">
<option value="1" selected>Ropa</option>
<option value="2">Moda</option>
<option value="3">Calzado</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="subCategory">Tipo</label>
<select name="subCategory" id="subCategory" class="form-control">
<option value="1">Camisas</option>
<option value="2">Vestidos</option>
<option value="3">Playeras</option>
</select>
</div>
</form>
El formulario contiene un select llamado "category" ese select es nuestro principal y en cuanto seleccione la primera opción, mostraremos los datos asociados a esa opción en otro select. Para ello requerimos una función:
<script language="javascript">
$(document).ready(function(){
$("#category").on('change', function () {
$("#category option:selected").each(function () {
category=$(this).val();
$.post("datos.php", { category: category }, function(data){
$("#subCategory").html(data);
});
});
});
});
</script>
Con esta función traeremos datos del primer select y se enviarán a un archivo llamado "datos.php". Este archivo tendrá la información que queremos mostrar dependiendo del primer select.
$html = "";
if ($_POST["category"]==1) {
$html = '
<option value="1">Camisas</option>
<option value="2">Vestidos</option>
<option value="3">Playeras</option>
';
}
if ($_POST["category"]==2) {
$html = '
<option value="1">Relojes</option>
<option value="2">Pulseras</option>
<option value="3">Accesorios</option>
';
}
if ($_POST["category"]==3) {
$html = '
<option value="1">Zapatillas</option>
<option value="2">Zapatos</option>
<option value="3">Sandalias</option>
';
}
echo $html;
Espero te haya gustado este sencillo ejemplo. Si tienes alguna duda, dejala en los comentarios
Puedes descargar el código fuente en github
SOBRE EL AUTOR
Javi Zamora
Hola soy Javier creador de Visión Código con la intención de ayudar a los nuevos jovenes programadores con pequeños tutoriales que te salvan la vida.