Problem showing content dependent on a SELECT in Laravel

Question

Problem showing content dependent on a SELECT in Laravel

Navigation

#1 by (1 votes)

0

I have a table called 'AUTOS' and 'COMPANIES' , respectively, in my database in phpmyadmin. I'm working on < strong> PHP with LARAVEL.

I have a function in Javascript which should show me a certain number of records according to the selected option of <select> .

At the moment what I am trying to achieve is that, when a select option is selected, a checkbox corresponding to the selected option will be shown.

For example, if you select the company id = 1 which is Mazda, the checkboxes that should be shown correspond only to models of this brand.

The <select> gets the data from the company table of my database, using php code. Same as this example.

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

But at the moment the js does not work for me, it only brings me the 1 record nothing more.

Which is the following:

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

This being the Div with the checkboxes that I want to show.

@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

The following is an example of what I want to achieve. It is completely different in terms of content, but in the functional aspect it is the same.

Note: I clarify that the following is just an example, and not what I really have in my code.

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>

To explain the relationship between compañia-autos which is 1:M I have these tables.

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

If a company is selected and this is Mazda for example, the checkboxes that should be shown correspond to this company as in the example.

But with the code that I have in my javascript function it does not work for me (not in the example). It could also be with jquery.

What could be wrong?

javascript php laravel

asked by M4uriXD 29.10.2018 в 14:51

source

1 answer

Because when changing components, multiply the objects of * ngForm? Do not download the file to the browser using OutputStream.Write in ASP.NET WebService C #

score 1 · Accepted Answer

In summary I have changed some things.

<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

And the 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>