Materialize Select JavaScript: невозможно инициализировать .formSelect не является функцией, .append не является функцией - PullRequest
Новая
       8

Materialize Select JavaScript: невозможно инициализировать .formSelect не является функцией, .append не является функцией

0 голосов
/ 05 мая 2019

Как вы можете видеть из комментариев в фрагментах кода ниже, я перепробовал все, что, кажется, имеет смысл.Я нахожу документацию Материализации очень старой, в которой отсутствуют детали и примеры рабочего кода.Я нашел 1 или 2 сообщения здесь на SO, и я пытаюсь (см. Прокомментированный код) предложения.Я не могу сделать эту работу.

Вы видите, что я делаю не так?

Спасибо, спасибо, спасибо за помощь: -)

Вот 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));
    // });

});

1 Ответ

0 голосов
/ 05 мая 2019

Следующее работает при загрузке / инициализации 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);
});

Это также, кажется, работает нормально, когда вы динамически загружаете списки опций Select в событиях.Просто всегда вызывайте .init () после изменения вашего выбора.

...