I have some hard time to make select2 js lib working in laravel, there are no errors in console. My blade file:

@extends('layouts.app')

@section('content')
<script src=".2.1/jquery.min.js"></script>
<link href=".0.3/css/select2.min.css" rel="stylesheet" />
<script src=".0.3/js/select2.min.js"></script>
<div >
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dodaj nowy podmiot</div>
                <div class="panel-body">
                    <div >
                        <div>
                            <form>
                                <div class="form-group">
                                    <select class="js-example-basic-single">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $(".js-example-basic-single").select2();
</script>
@endsection

It only changes CSS of the item, but select even if it's clickable nothing happens, it doesn't show options, dropdown is not appearing.

Has anyone faced issues like that before ?

I have some hard time to make select2 js lib working in laravel, there are no errors in console. My blade file:

@extends('layouts.app')

@section('content')
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div >
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dodaj nowy podmiot</div>
                <div class="panel-body">
                    <div >
                        <div>
                            <form>
                                <div class="form-group">
                                    <select class="js-example-basic-single">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $(".js-example-basic-single").select2();
</script>
@endsection

It only changes CSS of the item, but select even if it's clickable nothing happens, it doesn't show options, dropdown is not appearing.

Has anyone faced issues like that before ?

• javascript
• php
• laravel
• jquery-select2
• laravel-5.4

3 Answers 3

That's because defer.

In app.blade.php file there is declare like below.

<script src="{{ asset('js/app.js') }}" defer></script>

Here remove defer and make it like

<script src="{{ asset('js/app.js') }}"></script>

It will work

Ok guys, I have resolved this problem by menting this line in my layout blade:

<!-- <script src="{{ asset('js/app.js') }}"></script> !-->

so, the default js file included in laravel is causing the problem with select2 library.

Thanks for help

Have you tried wrapping the select instantiation code inside the ready clause?

$( document ).ready(function() 
{
  $(".js-example-basic-single").select2();
}

EDIT:

You are missing the type="text/javascript" in your javascript imports. Some browsers won't execute JavaScript if it doesn't have that tag. Try to fix that and see if it works.