Как сделать зависимые фильтры с select2?

Question

[Vadim Anghel]

Есть проект на laravel .
На данный момент есть 3 фильтра.
1.country
2.university
3.faculty
Вывожу данные через select2 с помощью Ajax
Суть вопроса
1.Когда я выбираю страну ех. Россия -> в селекте university должны выводится все из россий, и в faculty -> все факультеты которые есть во всех выбранных университетов .
2 когда я выбираю факультет должны выводится все университеты и страны
3. Когда я выбираю университет должны выводится все факультеты и толко одна страна.

База данных
University:
Id name country_id faculty_id
1. Univer. ro. 1

Country:
Id name Code
1. Romania ro

Faculty
Id name
1. Business

Answer 1

[gomer1726]

С помощью jquery при выборе страны отправлять запрос на сервер чтобы он выдал необходимые данные для ваших селекторов.
Например

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

Вижу вопрос задан почти сутки назад, но если не решили дайте знать, порешаем)

Comments

[Vadim Anghel]

@gomer1726
сможешь помочи?

[gomer1726]

Vadim Anghel, только увидел, разобрался?)

Answer 2

[Vadim Anghel]

Я сделал так но не получается сделать мулти селект...

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);
}