0

Quiero realizar un select anidado con ayuda de select2, entonces con ayuda de select2 primero hago la consulta del primer select que son las marcas, para el segundo select mando la selección del primer select por medio de ajax, y la recibo y guardo en la variable $seleccionMarca, la cuestion es que no funciona realizandolo de esta forma.

Este es el buscador de marca:

    $(document).ready(function(){
        $("#buscadorMarca").select2({
            ajax: {
                url: "../Backend/BuscarMarcaVehiculo.php",
                type: "post",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        palabraClave: params.term, // search term
                    };
                },
                processResults: function(response) {
                    return {
                        results: response
                    };
                },
                cache: true
            },
            "language": {
                "noResults": function(){
                    return "No se encuentra ninguna coincidencia <a href='Motos_Registro_Clientes_Frontend.php'  class='btn btn-danger'>+ Registrar Cliente</a>";
                }
            },
                escapeMarkup: function (markup) {
                    return markup;
                }
            
        });

    });

Por medio de la siguiente funcion es que mando la seleccion del primer select y recupero la informacion en una matriz, la matriz aparece de la siguiente forma: [{"id":"biz 100","text":"biz 100"}].

         $(document).ready(function () {
        $("#buscadorMarca").change(function(){
            var select = $('#buscadorMarca').val();
            
            $.ajax({
                url:'../Backend/BuscarLineaVehiculo.php',
                type:'POST',
                data: {select:select},
                success: function (data){
                      $("#buscadorLinea").select2({
                            data: data,
                            "language": {
                                "noResults": function(){
                                    return "No se encuentra ninguna coincidencia <a href='Motos_Registro_Clientes_Frontend.php'  class='btn btn-danger'>+ Registrar Cliente</a>";
                                }
                            },
                                escapeMarkup: function (markup) {
                                    return markup;
                                }
                            
                        });
                },
             });
        });
    });

El problema viene cuando utilizo el segundo select que aparece en cada opcion un caracter de la matriz: introducir la descripción de la imagen aquí

2
  • Angel creo que te has complicado un poco si lo he entendido bien, quieres el primer select que te busque las opciones via ajax. Ok lo veo correcto, pero el segundo select que te cargue los items segun el valor del primer select? Si es asi, porque no le pones un onchange al primer select que haga una llamada al php y te devuelva solamente los items que necesites para el segundo select y se los cargas ? Commented el 16 mar. 2022 a las 12:22
  • estoy intentando eso, pero al momento de pasar la matriz que me genera el php según la opción escogida del primer select al segundo select me aparece un carácter en cada campo de selección en el segundo select Commented el 16 mar. 2022 a las 14:15

1 respuesta 1

0

Aqui te pongo como lo hago yo, pero el segundo ajax seria con el resultado que necesitas.

$(document).ready(function(){
  $.ajax({
    url: 'https://mhw-db.com/items',
    type: 'get',
        contentType: 'application/json',
        dataType: 'json',
        success: function (data) {
          $('#select1').children().remove();
      for(var a = 0; a < data.length; a++){
        $('#select1').append('<option value="'+ data[a].id +'">'+ data[a].name +'</option>');
      }
      $('#select1').select2();
        }
  });
});

function ChangeSelect2(){
       $.ajax({
        url: 'https://mhw-db.com/items/',
        type: 'get',
        contentType: 'application/json',
        dataType: 'json',
        success: function (data) {
          $('#select2').children().remove();
          for(var a = 0; a < data.length; a++){
            $('#select2').append('<option value="'+ data[a].id +'">'+ data[a].name +'</option>');
          }
          $('#select2').select2();
        }
      });
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
<p>Select 1</p>
<select id="select1" onchange="ChangeSelect2()"></select>
<p>Select 2</p>
<select id="select2"></select>



</body>
</html>

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.