2

buenas tengo un select y quiero usar el select2 entonces en la ventana modal no me esta funcionando por ejemplo me salen los datos pero no busca ni se pone el cursor en el buscador ni nada pero si toma el estilo, si lo quito del modal y lo pongo en body busca y todo bien.

llamo la libreria de esta manera

    <script src="../public/js/selects/select2.min.js"></script>


<script >

// Select with search
          $('.select-search').select2();


</script>

y este seria el select2

<div class="col-sm-6">
                <label>Categoria:</label>
                <select name="id_categoria" id="id_categoria" class="form-control select-search" data-fouc>
                  <option  value="">Seleccione una Categoria</option>
                    <?php

                       for($i=0; $i<sizeof($cat);$i++){

                         ?>
                          <option value="<?php echo $cat[$i]["id_categoria"]?>"><?php echo $cat[$i]["categoria"];?></option>
                         <?php
                       }
                    ?>
                </select>
              </div>

quiero saber que estoy haciendo mal para que en le modal no funcione y fuera del modal si funcione

introducir la descripción de la imagen aquí

3 respuestas 3

2

Hola a mí me funcionó agregando lo siguiente:

$('#mySelect2').select2({
        dropdownParent: $('#myModal .modal-body')
    });

Esto lo leí en aquí

1
  • Con este ya funciona la busqueda y no se bugea la cerrar el modal, pero los scroll se dañan :c
    – Diego GT
    Commented el 30 oct. a las 14:33
1

yo tuve el mismo problema, y la solución es muy sencilla... En la modal tienes esto:

<div class="modal fade" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Este es el div con el que comienza tu modal ¿verdad?

Lo unico que tienes que hacer es quitar el tabindex="-1" de modo que te quede de la siguiente manera:

<div class="modal fade" id="modalExample" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Con eso ya deberia dejarte escribir y usar el buscador.

Ahora si con eso aun no te funciona, veo que donde inicializas select2 no lo haces cuando termine de cargar el DOM, ¿Estas utlizando la libreria de jquery?

En cualquier caso te dejo aqui la prueba sin el tabIndex

$(document).ready(function(){
    $('#select').select2(); 
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

<button class="btn btn-dark btn-sm" id="btnAbrirAgregarBien" data-toggle="modal" data-target="#modalExample">
          ABRIR MODAL
</button>

<div class="modal fade" id="modalExample" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Ejemplo</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="frmAgregarBienCapitalizable">         
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <label>Ejemplo:</label>
                            <select class="form-control form-control-sm" name="select" id="select">
                              <option value="0">Seleccionar propietario</option>                          
                              <option value="1"> CARRO</option>                          
                              <option value="2">MOTO</option>
                              <option value="2">CAMION</option>
                                    </select>
                                </div>
                            </div>
                                  
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                
                <button type="button" class="btn btn-primary" id="btn">
              
                    SIP
                </button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

2
  • Perfecto, me funciono asi, gracias Commented el 11 ene. 2023 a las 4:18
  • Por alguna razón, en Edge, Chrome no funciona, pero en Safari y Opera GX, si, tanto esta solución, como nuestra implementación, no se si sea un problema de los navegadores y select2
    – Diego GT
    Commented el 30 oct. a las 14:23
0

No funciona, porque cuando abres el modal, tu select no se encuentra definido.

Para que funcione, debes definir el select2 después de invocar al modal.

Por ejemplo, si presionando un boton abres el modal, ahí deberías definir el select2:

$('button#open-modal').click(function(){
    $('#my-modal').modal('show');
    $('.select-search').select2();
});

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.