0

Buen dia

Tengo un ajax que me consulta una lista de maquinas que estas relacionadas con unos productos esto funciona perfectamente pero hay relaciones que tienen muchos registros y esto se hace tedioso al momento de buscar investigando encontre select2 al implementarlo en un select normal o sea con los datos escritos en los option dentro del html perfecto pero no he podido implementarlo en la consulta de ajax

Blade

<div class="container-fluid">
                      <div class="form-row">
        
                        <div class="col-xs-12 col-sm-5">
                            <div class="form-group label-floating">

                              <label class="control-label">Maquina</label>
                             <select class="form-control selector "  id="maquina" name="maquina" required>
                                 <option value=""></option>
                             </select>
                          </div>
                          </div>    
        
                          <div class="col-xs-12 col-sm-5">
                            <div class="form-group label-floating">
                                <label class="control-label">Producto/tamaño</label>
                                <select class="form-control slector " id="id_producto" name="id_producto" required>
                            
                                    
                                </select>
                          </div>
                        </div>

Estos son los dos select hay en class tengo "mi-selector" para el script de select2 AJAX

$(document).ready(function() {
    // asignar los select a las variables 
    var plantSelect = $('#maquina');
    var areaSelect = $('#id_producto');
    // obteniendo las maquinas y llenando el select 
    function populatePlantSelect() {
        $.ajax({
            url: "{{ route('getmaquinas') }}",
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                $.each(response.data, function(key, value) {
                    plantSelect.append("" + value.nombre_maquina + "");
                });
            },
            error: function() {
                alert('Hubo un error obteniendo las maquinas!');
            }
        });
    }
    populatePlantSelect();
    // indica la maquina y lista los productos asignados a esa maquina 
    plantSelect.change(function() {
        var plantId = $(this).val();
        areaSelect.empty();
        if (plantId) {
            $.ajax({
                url: "{{ route('getproducto') }}",
                type: 'GET',
                data: {
                    maquina: plantId
                },
                dataType: 'json',
                success: function(response) {
                    areaSelect.append('') $.each(response.data, function(key, value) {
                        areaSelect.append("" + value.codigo + '__' + value.productos + "");
                    });
                    $('.mi-selector').select2();
                },
                error: function() {
                    alert('Hubo un error obteniendo los productos!');
                }
            });
        }
    });

    //despues de selecionar le producto asigna codigo de producto para llenar campo de la imagen y cargar 
});

JS

$(document).ready(function($){
    $(document).ready(function() {
        $('.mi-selector').select2();
    });
});

Se supone que con esto implementa la libreria select 2

Gracias de antemano

3
  • 1
    Dentro del success despues de tu iteracion pon la linea del select2 $('.mi-selector').select2();
    – Antonio
    Commented el 7 abr. 2021 a las 14:58
  • gracias por tu comentario realize lo que me indicaste pero no funciona :/ ---- success: function (response) { $.each(response.data, function (key, value) { plantSelect.append("<option value='" + value.id + "'>" + value.nombre_maquina + "</option>"); }); $('.mi-selector').select2(); }, ---- Commented el 7 abr. 2021 a las 15:20
  • El problema es que los campos <input class="form-control text-center mi-selector" ...> son de tipo texto y Select2, por definición, es solo aplicable a <select ..>
    – Triby
    Commented el 8 abr. 2021 a las 5:34

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.