Tengo unas tabla llamadas 'AUTOS' y 'COMPAÑIAS', respectivamente, en mi base de datos en phpmyadmin. Estoy trabajando en PHP con LARAVEL.
Tengo una funcion en Javascript la cual me debe mostrar una determinada cantidad de registros según la opción seleccionada de un <select>
.
De momento lo que trato de lograr es que, cuando se seleccione una opción del select, se muestren unos checkbox que le corresponden a la opción seleccionada respectivamente.
Por ejemplo si se selecciona la compañía de id = 1 la cual es Mazda, los checkbox que deben mostrase corresponden únicamente a modelos de esta marca.
El <select>
obtiene los datos de la tabla compañia de mi base de datos, mediante código php. Igual como este ejemplo.
<select name="SelectCompañias" onchange="MostrarAutos()">
@foreach($compañia as $concesionario)
<option value="{{$concesionario->id}}">{{$concesionario->nombre}}</option>
@endif
</select>
Pero de momento no me funciona el js solo me trae el 1 registro nada más.
El cual es el siguiente:
<script type="text/javascript">
function MostrarAutos(){
var DiVAutos = document.getElementById('AutosDiv');
var Lista = document.autos.SelectAutos.value;
if (Lista.value == {{$autos->compañia_id}}) {
DiVAutos.style.display = "inline-block ";
}else if (Lista.value == ''){
DiVAutos.style.display = "none";
}
}
</script>
Siendo este el Div con los checkbox que quiero mostrar.
@foreach($autos as $autos)
<div id="DiVAutos">
<input type="checkbox" id="{{$autos->nombre}}" value="{{$autos->id}}" name="autos[]">
<label id="LabelAutos" style="color: grey;" for="{{$autos->nombre}}">{{$autos->nombre}}</label>
<br>
</div>
@endforeach
Lo siguiente es un ejemplo de lo que quiero lograr. Es completamente diferente en cuanto al contenido, pero en el aspecto funcional es lo mismo.
Nota: Aclaro que lo siguiente es solo un ejemplo, y no lo que en verdad tengo en mi código.
function MostrarAutos(){
var Autos_1 = document.getElementById('Conjunto_autos_1');
var Autos_2 = document.getElementById('Conjunto_autos_2');
var Autos_3 = document.getElementById('Conjunto_autos_3');
var Autos_4 = document.getElementById('Conjunto_autos_4');
var DiVLabelAutos = document.getElementById('AutosDiv');
var boton = document.getElementById('btn_enviar');
if(document.autos.SelectAutos.value == 'Mazda'){
DiVLabelAutos.style.display = 'inline-block';
Autos_1.style.display = 'inline-block';
boton.style.display = 'inline-block';
Autos_2.style.display = 'none';
Autos_3.style.display = 'none';
Autos_4.style.display = 'none';
}else if(document.autos.SelectAutos.value == 'Nissan'){
DiVLabelAutos.style.display = 'inline-block';
Autos_2.style.display = 'inline-block';
Autos_1.style.display = 'none';
Autos_3.style.display = 'none';
Autos_4.style.display = 'none';
boton.style.display = 'inline-block';
}else if(document.autos.SelectAutos.value == 'Chevrolet'){
DiVLabelAutos.style.display = 'inline-block';
Autos_3.style.display = 'inline-block';
Autos_1.style.display = 'none';
Autos_2.style.display = 'none';
Autos_4.style.display = 'none';
boton.style.display = 'inline-block';
}else if(document.autos.SelectAutos.value == 'FIAT'){
DiVLabelAutos.style.display = 'inline-block';
Autos_4.style.display = 'inline-block';
Autos_1.style.display = 'none';
Autos_2.style.display = 'none';
Autos_3.style.display = 'none';
boton.style.display = 'inline-block';
}else if(document.autos.SelectAutos.value == ''){
DiVLabelAutos.style.display = 'none';
Autos_1.style.display = 'none';
Autos_2.style.display = 'none';
Autos_3.style.display = 'none';
Autos_4.style.display = 'none';
boton.style.display = 'none';
}
}
#autos{
font-family: 'Segoe UI';
}
#cuerpo{
font-family: 'Segoe UI';
margin-left: 1cm;
}
#btn_enviar{
width: 12%;
}
<div id="cuerpo">
<form action="#" method="POST" name="autos">
<label>Seleccione una marca de Autos:</label>
<select id="compañia" name="SelectAutos" onchange="MostrarAutos()">
<option value="">Seleccione...</option>
<option value="Mazda">Mazda</option>
<option value="Nissan">Nissan</option>
<option value="Chevrolet">Chevrolet</option>
<option value="FIAT">FIAT</option>
</select>
<br><br>
<div>
<div id="AutosDiv" style="display: none;">
<label>Selecciona todos los autos</label>
<br><br><br>
</div>
<br>
<div id="Conjunto_autos_1" style="display: none;">
<input type="checkbox" name="cuadro" value="Mazda2" id="id_1" required="required"/>
<label>Mazda2</label>
<br>
<input type="checkbox" name="cuadro" value="Mazda3" id="id_2" required="required"/>
<label>Mazda3</label>
<br>
<input type="checkbox" name="cuadro" value="Mazda MX-5" id="id_3" required="required"/>
<label>Mazda MX-5</label>
</div>
<div id="Conjunto_autos_2" style="display: none;">
<input type="checkbox" name="cuadro" value="Nissan Juke" id="id_4" required="required"/>
<label>Nissan Juke</label>
<br>
<input type="checkbox" name="cuadro" value="Nissan GT-R">
<label>Nissan GT-R</label>
<br>
<input type="checkbox" name="cuadro" value="Nissan 370z">
<label>Nissan 370z</label>
</div>
<div id="Conjunto_autos_3" style="display: none;">
<input type="checkbox" name="cuadro" value="Chevrolet Spark" id="id_5" required="required"/>
<label>Chevrolet Spark</label>
<br>
<input type="checkbox" name="cuadro" value="Chevrolet Aveo" id="id_6" required="required"/>
<label>Chevrolet Aveo</label>
<br>
<input type="checkbox" name="cuadro" value="Chevrolet Corvette >ZR1">
<label>Chevrolet Corvette ZR1</label>
</div>
<div id="Conjunto_autos_4" style="display: none;">
<input type="checkbox" name="cuadro" value="FIAT 500" id="id_7" required="required"/>
<label>FIAT 500</label>
<br>
<input type="checkbox" name="cuadro" value="FIAT 124 Spider" id="id_8" required="required"/>
<label>FIAT 124 Spider</label>
<br>
<input type="checkbox" name="cuadro" value="FIAT 500L">
<label>FIAT 500L</label>
</div>
<br><br>
<input type="submit" value="ENVIAR" id="btn_enviar" style="display: none;">
</div>
</form>
</div>
Para explicar la relación entre compañia-autos
la cual es 1:M
tengo estas tablas.
TABLA COMPAÑIA
id|nombre
------------
1|Mazda
2|Nissan
3|Chevrolet
4|FIAT
TABLA AUTOS
id|nombre |compañia_id
---------------------------------------
1 |Mazda2 | 1
2 |Mazda3 | 1
3 |Mazda MX-5 | 1
4 |Nissan Juke | 2
5 |Nissan GT-R | 2
6 |Nissan 370z | 2
7 |Chevrolet Spark | 3
8 |Chevrolet Aveo | 3
9 |Chevrolet Corvette ZR1 | 3
9 |FIAT 500 | 4
10|FIAT 124 Spider | 4
11|FIAT 500L | 4
Si se selecciona una compañía y esta es Mazda por ejemplo, los checkbox que deben mostrarse, corresponden a esta compañía igual que en el ejemplo.
Pero con el codigo que tengo en mi función en javascript no me funciona (no en el ejemplo). También podría ser con jquery.
¿Que podría estar mal?