javascript - 无法从 MaterializeCSS MultiSelect 获取值

Question

我想用js从多选中读取值。 在materializecss的文档中应该使用.getSelectedValues()。

控制台现在告诉我该功能不起作用。 我希望你能继续帮助我。

const selector = document.querySelectorAll('.funcselect');
const instanceSelector = M.FormSelect.init(selector);

function submitform() {
    // some other form to variables stuff

    var funcs = instanceSelector.getSelectedValues();

    // some xrh stuff

}

这与构建代码一样基本。

这里是控制台日志:

js.js:21 Uncaught TypeError: instanceSelector.getSelectedValues is not a function

希望有人能帮助我。

选择器的文档:https://materializecss.com/select.html

Answer 1

您需要 onChange 事件来处理 select 的更改。

<div class="container row">
    <div class="input-field col s12">
        <select multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <label>Materialize Multiple Select</label>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelector('select');
        elems.onchange = selectThem;
        var instances = M.FormSelect.init(elems);
        function selectThem() {
            var selectedOne = instances.getSelectedValues();
            console.log(selectedOne);
        }
    });
</script>

change event - MDN

Select - Materialize