1

Estoy realizando un select dinamico en Laravel con AJAX. Es un select entre marcas y modelos. AJAX me identifica la marca seleccionada pero luego cuando voy a seleccionar el modelo en vez de aparecerme las opciones correspondientes a la marca seleccionada previamente me aparece undefined como opcion.

Este es mi metodo en ModelController:

public function byBrand ($id){

    return ModelP::where('brand_id', $id)->get();

}

Mi ruta en api.php:

Route::get('/brands/{id}/modelos', 'Backend\ModelController@byBrand');

Ambos select:

<div class="form-group col-md-3">
                        <label for="brand_id">Marca</label>
                        <select name="brand_id" class="form-control" id="select-brand">
                          <option value="">Seleccionar</option>
                          @foreach ($brands as $brand)
                          <option value="{{ $brand->id }}">{{ $brand->brandName }}</option>
                          @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="model_id">Modelo</label>
                        <select name="model_id" class="form-control" id="select-model">
                          <option value="">Seleccionar</option>
                          @foreach ($models as $model)
                          <option value="{{ $model->id }}">{{ $model->modelName }}</option>
                          @endforeach
                        </select>
                    </div>

Mi script:

 $(function(){
      
      $('#select-brand').on('change', onSelectBrandChange);
  });

  function onSelectBrandChange() {

    var brand_id = $(this).val(); //Identifica el valor de la marca seleccionada.
    
    $.get('/api/brands/'+brand_id+'/modelos', function(data){
        var html_select = '<option value="">Seleccionar</option>';
        for (var i=0; i<data.length; i++)

             html_select +='<option value="'+data[i].id+'">'+data[i].name+'</option>';

        console.log(html_select);    

        $('#select-model').html(html_select);


    });
    



  }

Lo que me devuelve la consola al seleccionar una marca y luego intentar seleccionar un modelo:

<option value="">Seleccionar</option><option value="2">undefined</option>

En este caso seleccione la marca con id = 2

4
  • 2
    Verifica la estructura que te devuelve data con un console.log
    – gaidyjg
    el 17 sep. 2021 a las 18:01
  • @gaidyjg Data me devuelve bien los datos 0: Object { id: 3, modelName: "Iphon x", brand_id: 2, … } ​​ brand_id: 2 ​​ created_at: "2021-09-17T17:46:58.000000Z" ​​ id: 3 ​​ modelName: "Iphon x" ​​ updated_at: "2021-09-17T17:46:58.000000Z"
    – MateoG98
    el 17 sep. 2021 a las 18:06
  • @gaidyjg ya encontre el error era modelName y no name. Gracias.
    – MateoG98
    el 17 sep. 2021 a las 18:07
  • 1
    La respuesta como respuesta, abajo, en el campo Tu respuesta. Por favor. Para que le sirva a otros en el futuro. :)
    – Alfabravo
    el 17 sep. 2021 a las 18:27

1 respuesta 1

1

Mi ruta:

Route::get('/brands/{id}/modelos', 'Backend\ModelController@byBrand');

Mi metodo en ModelController:

public function byBrand ($id){

return ModelP::where('brand_id', $id)->get();

}

Ambos Select:

<div class="form-group col-md-3">
                        <label for="brand_id">Marca</label>
                        <select name="brand_id" class="form-control" id="select-brand">
                          <option value="">Seleccionar</option>
                          @foreach ($brands as $brand)
                          <option value="{{ $brand->id }}">{{ $brand->brandName }}</option>
                          @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="model_id">Modelo</label>
                        <select name="model_id" class="form-control" id="select-model">
                          <option value="">Seleccionar</option>
                          
                        </select>
                    </div>

Mi script:

<script>

  $(function(){
      
      $('#select-brand').on('change', onSelectBrandChange);
  });

  function onSelectBrandChange() {

    var brand_id = $(this).val(); //Identifica el valor de la marca seleccionada.
    

    if(! brand_id){

        $('#select-model').html('<option value="">Seleccionar</option>');
        return;
    }

    $.get('/api/brands/'+brand_id+'/modelos', function(data){
        var html_select = '<option value="">Seleccionar</option>';
        for (var i=0; i<data.length; i++)

             html_select +='<option value="'+data[i].id+'">'+data[i].modelName+'</option>';

            

        $('#select-model').html(html_select);


    });
    



  }

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.