Question

如何显示复选框，其中选择选项= category_id。

选择一个选项后，我试图显示复选框。

我想要同一件事。但是有了Laravel和数据库

firefox中的检查器

index.blade.php

wp.blocks.registerBlockType('plugin-name/gutenberg-block', {
    title: 'CustomBlockName',
    icon: iconSvg,
    category: 'widgets',
    attributes: {                                         /// <--- this block was missing
        myId: {                                           /// <--- this is the name of the property
            type: 'string',                               /// <--- this is the type
            source: 'attribute',                          /// <--- this is where is located the value I want
            default: Math.floor(Math.random() * 8388607), /// <--- this is a default value for new blocks
            selector: 'div.gutenberg-block',              /// <--- this is a selector for an element in saved block
            attribute: 'data-id'                          /// <--- this is the name of the attribute that contains desired value
        },
    },
    edit: (props) => {
        let dataId = props.attributes.myId; /// <--- this is always defined as the value of data-id attribute or as random number (as string)
        ...
    },
    save: (props) => {
        let dataId = props.attributes.myId; /// <--- this is always defined as the value of data-id attribute or as random number (as string)
        ...
    }
});

script.js

<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>

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

查看this link了解更多信息。
另外，this one还可以阅读有关eventListener的信息。

ReferenceError：未定义displayBoxes

1 个答案: