Как заполнить данными из БД список select в зависимости от выбора пользователя?

Question

[dch3]

Имеем стандартную html форму , одним из элементов которой является список select (элементы списка - это категории расходов или доходов. Например - квартплата или стипендия). Все эти категории хранятся в БД.
Вторым элементом формы является блок из двух radio кнопок ( "доходы", "расходы" ).

Нужно отображать нужные категории списка select в зависимости от выбора пользователя одной из двух радио кнопок.
Я пробовал реализовать это за три шага:
1) в шаблоне в формой

<code><form method="post">
        @csrf
            <div class="frame ms-2 me-2 mt-2 mb-2">
                <div class="radio">
                    <div class="form-check mt-4 ms-2 me-2">
                        <label for="income" class="form-check-label">доходы</label>
                        <input type="radio" class="form-check-input" id="income" name="transaction" value="income">
                    </div>

                    <div class="form-check ms-2 me-2">
                        <label for="expenses" class="form-check-label">расходы</label>
                        <input type="radio" class="form-check-input" id="expenses" name="transaction" value="expenses">
                    </div>
                </div>

                <div class="mt-4 ms-2 me-2">
                    <label for="date">дата</label>
                    <input type="date" id="date" class="ms-4 mb-4" name="date" style="border-radius: 0.4vw;">
                </div>
            </div>
            
            <div class="frame ms-2 me-2 mt-4 mb-2">
                <div class="d-flex flex-row mt-4 ms-2 me-2">
                    <label for="category" class="form-label">категории</label>
                    <select name="category" class="form-select ms-4" id="category">
                        @foreach ($categories as $category)
                            <option value="{{ $category }}">{{ $category }}</option>
                        @endforeach
                    </select></code>

2) скрипт js, подключаемый к этой форме

let element = document.querySelector('.radio');
    element.addEventListener('click', function(event) {
        window.location.href = "http://example.com/category/transaction/?transaction=" + event.target.value;
        const att = document.createAttribute("checked");
        event.target.setAttributeNode(att);
    });

3) когда с помощью скрипта js пользователь переходит по адресу "example.com/category/transaction/?transaction=" + event.target.value; , то этот маршрут обрабатывает следующий метод контроллера

class WebController extends Controller
{
    public function show(Request $request)
    {
        ($request->query('transaction') === 'income')
            ? $categories = Category::where('transaction', 'income')
                ->pluck('category')
                ->unique()
            : $categories = Category::where('transaction', 'expenses')
                ->pluck('category')
                ->unique();

        return view('web.category.transaction', compact('categories'));
    }
}

По итогу список заполняется нужными категориями, но не подсвечивается радио кнопка, когда пользователь ее выбирает. Т.е. радиокнопке. которую выбрали как-бы не присваивается атрибут checked
Подскажите пожалуйста, почему так?
Возможно существует более простой метод например через fetch()?

Answer 1

[iljaGolubev]

Подскажите пожалуйста, почему так?

window.location.href перезагружает страницу полностью, следовательно const att = document.createAttribute("checked") и прочее не выполняется.

Чтобы сделать через fetch - бэк должен возвращать json, Не думаю, что для Вас будет проще.

Чтобы новая страница (после перезагрузки) показывала checked нужно в blade добавить этот атрибут

@foreach ($categories as $category)
    <option 
        value="{{ $category }}" 
        {{ request()->get('transaction')==$category? 'checked':null }}
    >{{ $category }}</option>
@endforeach

Comments

[dch3]

Спасибо!
Я немного откорректировал ваш код и все получилось!

[dch3]

@iljaGolubev
Спасибо!
Я немного откорректировал ваш код и все получилось!

Answer 2

[dch3]

Все получилось, но мне не нравится, что в процессе перехода по ссылке страница обновляется и это заметно.
Поэтому я решил применить асинхр. запрос и пошел через fetch()

1) шаблон blade остается без изменений

2) изменил скрипт js

let element = document.querySelector('.radio');
     element.addEventListener('click', function(event) {
         fetch("http://example.com/test", {
             method: 'POST',
             body: {'transaction': event.target.value}
         })
         .then(function(response) {
            return response.json();
         })
         .then(function(category) {
             return alert(category);
         })
     });

3) изменил метод скрипта php
метод, обрабатывающий входящий запрос

public function show(Request $request)
    {
        $array = $request->all();
        foreach($array as $key => $value) {
            if ($key === 'transaction') {
                $categories = Category::where('transaction', $key)
                    ->pluck('category')
                    ->unique();

                return json_encode($categories);
            }
        }

    }

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

Comments

[iljaGolubev]

ахахах!
мой ответ - не решение. а Ваш - новый вопрос. =)

[iljaGolubev]

задайте новы вопрос и сформулируйте что именно "не работает"

[dch3]

@iljaGolubev
спасибо так и сделаю)