0

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>&nbsp;
  <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?

0

1 respuesta 1

1

En resumen he cambiado algunas cosillas.

<select name="SelectCompañias" onchange="MostrarAutos(event)">
  @foreach($compañia as $concesionario)
  <option value="{{$concesionario->id}}">{{$concesionario->nombre}}</option>
  @endif    
</select>

@foreach($autos as $autos)
    <div class="DiVAutos" style="display: none">  
         <input type="checkbox" data-concesionario="{{$autos->compañia_id}}" id="{{$autos->nombre}}" value="{{$autos->id}}" name="autos[]">
         <label id="LabelAutos" style="color: grey;" for="{{$autos->nombre}}">{{$autos->nombre}}</label>
         <br>
     </div>
@endforeach

Y el script

<script type="text/javascript">
    function MostrarAutos(event){
        var target = $(event.target);
        var value = target.val();

        $('.DiVAutos').hide();
        $('[data-concesionario="'+value+'"]').closest('.DiVAutos').show();

    }
</script>
6
  • Probe aquello y no me funciona. ¿Porqué será?
    – M4uriXD
    Commented el 29 oct. 2018 a las 15:32
  • te arroja algo la consola? algun error de javascript? Commented el 29 oct. 2018 a las 15:33
  • no ningún error.
    – M4uriXD
    Commented el 29 oct. 2018 a las 15:34
  • Mira el codigo fuente, y comprueba que <input type="checkbox" data-concesionario> esta siendo rellenado por algun numero Commented el 29 oct. 2018 a las 15:35
  • Gracias amigo, en un principio no lei bien tu respuesta. Me falto agregar esta linea al input. data-concesionario="{{$autos->compañia_id}}" . Y ahora funciona.
    – M4uriXD
    Commented el 29 oct. 2018 a las 15:39

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.