Блог

У меня есть форма, которая выглядит так, как показано ниже. У меня есть три «белых» выпадающих списка для фильтрации значения для выпадающего списка тегов регистрации оборудования ( значения раскрывающегося поля ввода, в котором указана метка тега регистрации оборудования, будут отображаться только после того, как пользователь выберет значения для трех «белых» выпадающих списков). Таким образом, значения тегов регистрации оборудования будут отличаться в зависимости от значения выпадающего списка «белый».

Я хочу, чтобы это был живой фильтр, параметры выпадающего списка будут немедленно меняться каждый раз, когда пользователь выбирает значение выпадающего списка «белый». В настоящее время мой подход заключается в использовании onchange=" this.form.submit()" атрибута в раскрывающихся списках «белый» и возврате значений после фильтра, но я понимаю, что у этого метода есть недостаток, который заключается в том, что пользователь может случайно отправить форму при изменении значения раскрывающихся списков «белый». Как я могу предотвратить это и разрешить пользователям отправлять форму только нажатием кнопки «Сохранить»?

     $this->Calibration_Location = $request->get('selected_location');
    $this->Calibration_Category = $request->get('selected_category');
    $this->categories = Equipment::select('Category')->distinct()->get()->toArray();
    $this->locations = Equipment::select('Location')->distinct()->get()->toArray();
    $matchThese = ['Category' => $this->Calibration_Category, 'Location' => $this->Calibration_Location];
    $this->Registration_Select_Tags = Equipment::select('Registration Tag')->distinct()->where($matchThese)->get();
 

Я также пробовал jQuery, но я могу запускать только по указанному раскрывающемуся полю, а не по любому из них.

 <script type="text/javascript">
        $(document).ready(function() {
            var location, category
            $('#selected_transfer_location').change(function() {
                location = $(this).val();
                console.log(location);
                $('#selected_transfer_category').change(function() {
                    category = $(this).val();
                    console.log(category);
                });

                // $('#transfer_registration_tag').find('option').not(':first').remove();

                $.ajax({
                    url: 'Transaction/'   location   '/'   category,
                    type: 'get',
                    dataType: 'json',
                    success: function(response) {
                        var len = 0;
                        if (response.data != null) {
                            len = response.data.length;
                        }

                        if (len > 0) {
                            for (var i = 0; i < len; i  ) {
                                var id = response.data[i]['Registration Tag'];
                                var name = response.data[i]['Registration Tag'];

                                var option = "<option value='"   id   "'>"   name  
                                    "</option>";

                                $("#transfer_registration_tag").append(option);
                            }
                        }
                    }
                })
            });

        });

    </script>
 

Я надеюсь, что мой вопрос ясен, все еще новичок в Laravel, и я надеюсь, что смогу получить от вас некоторые подсказки.

Первый подход может заключаться в том, что вы используете вызов ajax-запроса при изменении каждого из них и извлекаете отфильтрованные результаты. Что-то вроде этого:

 $('#dropdown1, #dropdown2, #dropdown3').change(function(){
    var val1 = $('#dropdown1').val();
    var val2 = $('#dropdown2').val();
    var val3 = $('#dropdown3').val();

    //And then your ajax call here to fetch filtered results.
});
 

Единственная проблема в том, что этот вызов Ajax будет выполняться минимум 3 раза, по одному для каждого из них.

Второй подход может заключаться в том, что вы даете небольшую кнопку под этими выпадающими списками, что-то вроде тегов выборки. Когда пользователь выберет все 3 значения, он нажмет на эту кнопку, и вы вызовете свой ajax onClick этого btn. Так что ваш Ajax будет вызван только один раз.

Для этого вы можете использовать livewire. Это просто. Чтобы установить его, вы должны использовать composer, записав на пленку команду fowllowing: composer req livewire/livewire

Пожалуйста, ознакомьтесь с этим руководством, чтобы узнать, как сделать то, что вы хотите сделать, используя фреймворк.