1

tengo el siguiente problema con bootstrap y select2

lo que sucede es que abro un modal en bootstrap con un formulario de registro y uno de los campos es un selector con buscador de select 2 pero unicamente me deja seleccionar manualmente el campo deseado, no puedo buscar en el dentro del modal de bootstrap, si lo saco del modal funciona con normalidad



<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="librerias/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="librerias/select2/css/select2.css">
        <script src="librerias/jquery-3.5.1.min.js"></script>
        <script src="librerias/bootstrap/js/bootstrap.js"></script>
        <script src="librerias/select2/js/select2.js"></script>
    </head>
    <body>
<div class="modal fade" id="nueva_orden" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Nueva Orden de Servicio</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" method="post">
                    <label for="nombre_tecnico">Técnico Encargado</label><br>
                    <select name="nombre_tecnico" id="tecnics">
                        <option value="alonso">Alonso</option>
                        <option value="andres">Andrés</option>
                        <option value="edwin">Edwin</option>
                        <option value="jahdiel">Jahdiel</option>
                        <option value="jose luis">Jose Luis</option>
                        <option value="josue">Josué</option>
                        <option value="kevin">Kevin</option>
                        <option value="lalo">Lalo</option>
                    </select><br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <input type="submit" class="btn btn-primary" Value="Registrar Orden">
            </div>
        </form>
    </div>
</div>
</div>
    </body>
</html>
<script type="text/javascript">
    $(document).ready(function(){
        $('#tecnics').select2('');
    });
</script>


 ``

1 respuesta 1

2

Eso lo puedes resolver definiendo como elemento padre del select2 al elemento que conviertes en modal.

$(document).ready(function(){
        $('#tecnics').select2({
dropdownParent: 'nueva_orden'
}
);
    });

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.