ReferenceError: displayBoxes не определен

Question

Как отображать флажки, где выберите option = category_id.

Я пытался показать флажки, после того, как я выбрал параметр.

И я хочу то же самое.Но с Laravel и базой данных

Инспектор в Firefox

, флажок

index.blade.php

<form action="{{ route('computers.store') }}" method="post">
    {{ csrf_field() }}
    <div class="form-group">
        <select id="select" name="category_id" class="form-control" onchange="displayBoxes()">
            @foreach($categories as $category)
                <option data-description="{{ $category->description }}" value="{{ $category->id }}">{{ $category->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <p id="description"></p>
    </div>
    <div class="form-group d-none box17">
        <p></p>
        @foreach ($computers->where('category_id', 2) as $computer)
            <input type="checkbox" id="{{ $computer->latin }}">
            <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
        @endforeach
    </div>
    <div class="form-group d-none box18">
        <p></p>
        @foreach ($computers->where('category_id', 3) as $computer)
            <input type="checkbox" id="{{ $computer->latin }}">
            <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
        @endforeach
    </div>
    <div class="form-group d-none box19">
        <p></p>
        @foreach ($computers->where('category_id', 4) as $computer)
            <input type="checkbox" id="{{ $computer->latin }}">
            <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
        @endforeach
    </div>
    <div class="form-group">
        <button class="btn btn-primary">ادامه</button>
    </div>
</form>

script.js

    function displayBoxes() {
        let option = document.querySelector('#select');
        let boxes = document.querySelectorAll('div');
        boxes.forEach(function(el) {
            el.classList.add('d-none');
        });
        document.querySelector('.box' + option.options[option.selectedIndex].value).classList.remove('.d-none');
    }

Answer 1

Попробуйте удалить onchange="displayBoxes()" из элемента select и Добавьте eventListener, который прослушивает событие change этого элемента в вашем файле script.js. Ваш код должен выглядеть так:

const selectElement = document.querySelector('#select');

selectElement.addEventListener('change', (event) => {
    let boxes = document.querySelectorAll('div');
    boxes.forEach(function(e) {
        e.classList.add('d-none');
    });
});
document.querySelector('.box' + selectElement.options[selectElement.selectedIndex].value).classList.remove('.d-none');

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