0

Este código que está no jsfidle funciona, ou seja, mostra o select estilizado e com o select com um input search.

    <html>
            <head>
                <title>TESTE</title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

                <script language="JavaScript">
                    $('.multiplo').select2({
                        placeholder: 'selecione'
                    });
                </script>

                <style type="text/css">
                    .multiplo{
                        width:50%;
                    }
                </style>
            </head>


            <body>

            <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/>

            <select class="multiplo" name="" multiple="multiple">
                <option>Um</option>
                <option>Dois</option>
                <option>Três</option>
                <option>Quatro</option>
            </select>



            </body>
            </html>

Mas quando eu pego esse código e jogo em um arquivo .php no localhost não funciona.

Como aparece quando executo no jsfidle: Execução no jsfidle

Agora como aparece quando executo no localhost: Execução no localhost

Alguem sabe dizer o que pode estar ocasionando isso?

Nos sources no console do chrome parece que ele carrega tanto o .css quanto o .js

Source console chrome

EDIT

Aba console Aba console

1
  • Como eu disse anteriormente, coloque o link do css dentro da tag <"head">, exclua cache(opcional) e tente novamente! No seu caso, pode ser problemas com cache que é bastante comum! Mantenha-nos informados! 6/02/2018 às 1:23

1 Resposta 1

2

Só consegue aceder aos elementos da página depois de ela estar totalmente carregada.

Para isso coloque o seu código dentro de:

$( document ).ready(function() {
    //aqui
});

Ou na sua forma mais compacta e comum:

$(function() {
    //aqui
});

Aplicando ao seu código ficaria assim:

$(function() {
    $('.multiplo').select2({
        placeholder: 'selecione'
    });
});

No JSFiddle não necessita de ter isso porque a própria plataforma executa apenas o bloco de javascript após o html e css ser carregado. O mesmo acontece nos live snippets do StackOverflow.

Documentação para o document ready de JQuery

4
  • Poxa...isso mesmo!!! Nem pensei nisso. Vlw brother!!! O que estava ocorrendo então era que a páginas estava carregando o DOM antes de carregar os scripts .js e .css?
    – L.J
    6/02/2018 às 4:48
  • @L.J Ao contrario, as páginas estavam executando o js antes de carregar o DOM.
    – Isac
    6/02/2018 às 10:11
  • O js sempre é carregado antes do DOM ?
    – L.J
    6/02/2018 às 13:47
  • @L.J Depende do sitio onde se encontra na página. Normalmente se está no topo, no <head> então é executado antes do DOM ser carregado. Se quer ter a certeza que é executado apenas depois do DOM ser carregado tem de colocar o código dentro do document ready como eu indiquei.
    – Isac
    6/02/2018 às 15:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .