Problema con select2 Javascript

flopi01 #1 Jun '15

Tengo un problema a la hora de implementar select2 en mi pagina, quiero un select que tenga autocompletar para buscar dentro de este un codigo postal, pongo el codigo:

<script src="{% static 'js/jquery-1-11-1.js' %}"></script>
                            <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"
                                  rel="stylesheet"/>
                            <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

                        <select id="codigoPostal" class="form-control js-example-basic-single">
                            <option selected="selected" value="">---------</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                        <script>
                            $(document).ready(function () {
                                $('.js-example-basic-single').select2();
                            });
                        </script>

Y el error que me sale en la consola es el siguiente:

TypeError: $(...).select2 is not a function
	

$('.js-example-basic-single').select2();

La libreria jquery me la carga bien, llevo ya varios dias dandole vueltas a esto y buscando informacion por internet y no encuentro mucha informacion.

Si alguien conoce alguna alternativa a select2 tambien me sirviria, estoy haciendo la aplicacion web con Django.

_eNcoDe #2 Jun '15

Añadiendo https: a las direcciones debería solucionarse, sino siempre puedes cargarlos localmente como haces con jquery.

yarviT0 #3 Jun '15

#1 por si acaso utiliza para llamar a la libreria estos enlaces
http://es.cdnjs.com/libraries/select2

S

shaba #4 Jun '15

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
                            <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"
                                  rel="stylesheet"/>
                            <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

                        <select id="codigoPostal" class="form-control js-example-basic-single">
                            <option selected="selected" value="">---------</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                        <script>
                            $(document).ready(function () {
                                $('.js-example-basic-single').select2();
                            });
                        </script>

https://jsfiddle.net/apktqhjt/

KoRMuZ #5 Jun '15

prueba usando jQuery en vez del $.

flopi01 #6 Jun '15

Ya lo he solucionado, he pasado el .select2() sin ponerlo en la funcion ready y me ha funcionado.

Gracias a todos por las respuestas.

Problema con select2 Javascript

Usuarios habituales

Tags