Question

正如您在下面的代码片段中的注释所看到的，我已经尝试了一切似乎有意义的事情。我发现Materialise文档非常陈旧，缺少详细信息和有效的代码示例。我在此处找到了1或2个帖子，我正在尝试（请参阅评论代码）建议。我无法完成这项工作。

您能看到我在做什么吗？

谢谢，谢谢，谢谢您的帮助：-）

这是HTML内容...

<div class="container">
    <div class="row">
        <div class="input-field col s12">
            <select id="collName">
                <option>( Choose collection... )</option>
            </select>
        </div>
        <div class="input-field col s12">
            <select id="query">
                <option>( Choose query... )</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div id="status" class="col s12">Ready</div>
    </div>
    <div class="row">
        <div id="collections" class="col s4">4 columns</div>
        <div id="container" class="col s8"></div>
    </div>
</div>

这是JavaScript代码...

document.addEventListener('DOMContentLoaded', function () {
    // const elems = document.querySelectorAll('select');
    // const options = {};
    // const instances = M.FormSelect.init(elems, options);

    const optionsColls = [];
    config.collections.forEach(c => {
        optionsColls.push("<option>" + c + "</option")
    });

    const elemCollName = document.getElementById('collName');
    collName = M.FormSelect.init(elemCollName, {});
    //collName = M.FormSelect.getInstance(elemCollName);
    // collName.empty();
    collName.formSelect();
    collName.append(optionsColls);

    // config.collections.forEach(coll => {
    //  collName.options.add(new Option(coll, coll));
    // });

});

Answer 1

在加载/初始化Select ...时，以下方法确实起作用

document.addEventListener('DOMContentLoaded', function () {
    const elemCollName = document.getElementById('collName');
    config.collections.forEach(c => {
        elemCollName.options.add(new Option(c, c));
    });
    M.FormSelect.init(elemCollName);
});

当您在事件中动态加载选择选项列表时，这似乎也可以正常工作。修改选择后，始终调用.init（）。

物化选择JavaScript：无法初始化.formSelect不是函数，.append不是函数

1 个答案: