0

Al momento de ejecutar el modal el select2 no funciona simplemente queda como select comun, probe el select2 afuera del modal y si funciona correctamente. para el modal estoy utilizando componente de jetsteam

select2 dentro del modal.

introducir la descripción de la imagen aquí

select2 afuera del modal.

introducir la descripción de la imagen aquí

Page modal

<div>
    <x-button-blue wire:click="$set('open',true)">
        <i class="fa-solid fa-user-plus"></i> &nbsp;&nbsp;AGREGAR DEPARTAMENTO
    </x-button-blue>

    <x-jet-dialog-modal wire:model="open">
        
        <x-slot name="title">Agregar Usuario</x-slot>
        
        <x-slot name="content">
            <div class="mb-4">
                <x-jet-label value="Departamento" />
                <x-jet-input type="text" wire:model.defer="departamento" />
                <x-jet-input-error for="departamento" />
            </div>

            <div class="form-group">
                <label>Minimal</label>
                <select class="form-control select2" style="width: 100%;">
                  <option selected="selected">Alabama</option>
                  <option>Alaska</option>
                  <option>California</option>
                  <option>Delaware</option>
                  <option>Tennessee</option>
                  <option>Texas</option>
                  <option>Washington</option>
                </select>
              </div>


        </x-slot>
        
        <x-slot name="footer">
            <x-jet-secondary-button wire:click="$set('open',false)">Cancelar</x-jet-secondary-button>
            <x-jet-danger-button wire:click="save">Confirmar</x-jet-danger-button>
        </x-slot>

    </x-jet-dialog-modal>

</div>

Page view

introducir la descripción de la imagen aquí

eh estado buscando y me tope que no era el único y las soluciones que daban no me funcionaron asd

2
  • 1
    No se cuando defines el modal, seguramente después de la carga inicial del documento de forma dinámica, por lo tanto debes volver a ejecutar la carga en javascript del select2 cuando eso ocurra
    – masterguru
    el 5 nov. 2022 a las 8:56
  • Y por favor, no uses imágenes para poner código pues recibirás peores ayudas al no poder reproducir tu escenario de forma cómoda. Recuerda que puedes editar tu pregunta agregándolo como texto y haciendo las modificaciones que necesites tantas veces como quieras.
    – masterguru
    el 5 nov. 2022 a las 8:58

2 respuestas 2

0
@push('script')
    <script>
      $('.selectpicker').select2();
    </script>
@endpush

debes colocar el fragmento de arriba en tu componente,y app.blade.php declara lo siguiente @stack('script')

1
  • ¿Puedes editar la respuesta explicando cómo esos pasos solucionan el problema?
    – Mateo
    el 4 feb. a las 0:05
0

Use: dropdownParent

Ejemplo:

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

Dejo una respuesta referente a la consulta aquí por si alguien llegue a necesitar. https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal

2
  • Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión
    – padaleiana
    el 18 may. a las 12:43
  • Hola Thania, gracias por colaborar, la respuesta debe ser autocontenida, esto es que no dependa de imágenes o enlaces, por favor, edítala, elimina las imágenes, y agrega tu código y mensajes de error como texto, así evitarás recibir votos negativos y lograrás que sea mejor recibida, gracias. . el 18 may. a las 13:43

Tu Respuesta

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

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