Select2 does not work on my pc but works on jsfidle

Question

Select2 does not work on my pc but works on jsfidle

Asked 6 years, 10 months ago

Viewed 460 times

0

This jsfidle code works, i.e., shows stylized select and select with 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>

But when I get this code and play in a file. php on localhost does not work.

How it appears when running in jsfidle:

Now as it appears when running on localhost:

Can anyone tell what might be causing this?

In Chrome console sources it seems that it loads both . css and . js

EDIT

Console tab

As I said earlier, put the css link inside the <"head"> tag, delete cache (optional) and try again! In your case, it could be cache issues that are quite common! Keep us informed!

– Maíícon Ferreira

2018/02/06 at 01:23

1 answer

Browser other questions tagged javascript html jquery html-select jquery-select2

You are not signed in. Login or sign up in order to post.

by Isac • **24,736** points · Answer 1 · 2018-02-06T01:19:20+00:00

You can only access page elements after it is fully loaded.

For this put your code inside:

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

Or in its most compact and common form:

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

Applying to your code would look like this:

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

Jsfiddle does not need to have this because the platform itself runs only the javascript block after html and css is loaded. The same happens in live snippets stackoverflow.

Documentation for Document ready de Jquery