0

Estoy intentando usar select2 pero no está funcionando correctamente, queda de la siguiente manera (sin mostrar el campo con las opciones seleccionadas)

introducir la descripción de la imagen aquí

Debería verse de esta manera introducir la descripción de la imagen aquí

El código html es este

                <div class="container">
                    <h4>Select2</h4>
                    <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
                        <option value="AL">Alabama</option>
                        ...
                        <option value="WY">Wyoming</option>
                    </select>
                </div>

y el script

$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

Estoy usando junto con CDN.

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

Alguna idea de qué podría ser el problema?

4
  • en que manera estás acomodando tus scripts? al final de documento? tu script lo estás poniendo después de importar la librería?
    – Sr1871
    el 11 feb. 2020 a las 22:18
  • El script estoy colocando al final, y estoy llamando a la librería en el layout el 11 feb. 2020 a las 22:30
  • ¿Y el problema cuál es? ¿Cómo debería verse?
    – A. Cedano
    el 11 feb. 2020 a las 23:37
  • @A.Cedano ya agregue como deberia verse el 12 feb. 2020 a las 0:05

2 respuestas 2

2

El problema debe estar ocurriendo debido a la forma en que agregas las librerías, o a que está habiendo interferencias con otras librerías.

Aquí se agrega en primer lugar la librería jQuery, y a continuación las dos librerías de select2. Las tres librerías en el head y el código funciona del modo esperado, como demuestra el snippet.

$(document).ready(function() {
  $('.js-example-basic-multiple').select2({
    width: '300px'
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<div class="container">
  <h4>Select2</h4>
  <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </select>
</div>

0

no estás importando el css de bootstrap theme

<link rel="stylesheet" href="/path/to/select2.css">
<link rel="stylesheet" href="/path/to/select2-bootstrap4.css">

Podes descargar el .css aquí select2-bootstrap4-theme

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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