How to make dependent filters with select2?

Question

JavaScript

I have a laravel project.
There are currently 3 filters.
1.country
2.university
3.faculty I
display data through select2 using Ajax
Essence of the question
1.When I select the country ex. Russia -> in the university select, everything from Russia should be displayed, and in faculty -> all the faculties that are in all the selected universities.
2 when I select a faculty, all universities and countries should be displayed
3. When I select a university, all faculties and only one country should be displayed.

Database
University:
Id name country_id faculty_id
1. Univer. ro. 1

Country:
Id name Code
1. Romania ro Id name

Faculty
1.Business

Answer 1

Using jquery, when choosing a country, send a request to the server so that it gives the necessary data for your selectors.
for example

$("айди селектора страны").change(function(){
      Здесь вы должны взять id Страны и передать на сервер чтобы тот отправлял вам данные для других селекторов
});

I see the question was asked almost a day ago, but if you don’t decide, let me know, we’ll solve it)

Answer 2

I did this but I can't make multi select...
view

<div class="form-group">
                            <label for="">Country</label>
                            <select class="form-control"  name="provinces" id="provinces">
                                <option value="0" disable="true" selected="true">=== Select Country ===</option>
                                @foreach ($country as $key => $value)
                                    <option value="{{$value->code}}">{{ $value->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="">University</label>
                            <select class="form-control" name="regencies" id="regencies">
                                <option value="0" disable="true" selected="true">=== Select University ===</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="">Faculty</label>
                            <select class="form-control" name="districts" id="districts">
                                <option value="0" disable="true" selected="true">=== Select Faculty ===</option>
                            </select>
                        </div>

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

                        <script type="text/javascript">
                            $('#provinces').on('change', function(e){
                                console.log(e);
                                var country = e.target.value;
                                $.get('/json-regencies?country=' + country,function(data) {
                                    console.log(data);
                                    $('#regencies').empty();
                                    $('#regencies').append('<option value="0" disable="true" selected="true">=== Select University ===</option>');

                                    $('#districts').empty();
                                    $('#districts').append('<option value="0" disable="true" selected="true">=== Select Faculty ===</option>');

                                    $('#villages').empty();
                                    $('#villages').append('<option value="0" disable="true" selected="true">=== Select Villages ===</option>');

                                    $.each(data, function(index, regenciesObj){
                                        $('#regencies').append('<option value="'+ regenciesObj.id +'">'+ regenciesObj.name +'</option>');
                                    })
                                });
                            });

                            $('#regencies').on('change', function(e){
                                console.log(e);
                                var id = e.target.value;
                                $.get('/json-districts?id=' + id,function(data) {
                                    console.log(data);
                                    $('#districts').empty();
                                    $('#districts').append('<option value="0" disable="true" selected="true">=== Select Faculty ===</option>');

                                    $.each(data, function(index, districtsObj){
                                        $('#districts').append('<option value="'+ districtsObj.id +'">'+ districtsObj.faculty_id +'</option>');
                                    })
                                });
                            });

                        </script>

controller

public function regencies(){
        $provinces_id = Input::get('country');
        $regencies = University::where('country', '=', $provinces_id)->get();
        return response()->json($regencies);
    }
public function districts(){
    $regencies_id = Input::get('id');
    $districts = UniversityFaculty::where('university_id', '=', $regencies_id)->get();
    return response()->json($districts);
}