Materialize.css selectbox рендеринг дубликатов выбора

Question

Я использую библиотеку Materialize.css (v 1.0.0) с 2018 года для своего проекта по добавлению компонентов материала. Однако мне не удалось инициализировать с ним два поля выбора.

На моей странице есть два поля выбора.

$(function() {
  $("#numPagesPaginate").formSelect();
  $("#numRatingsEdit").formSelect();
});

<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


<select id="numRatingsEdit" name="numRatingsEdit" style="display:none">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Однако, когда я инициализирую оба поля выбора, используя это, работает только первое.

Кроме того, если я инициализирую второй блок выбора в теге скрипта в другом месте, блок инициализируется и работает, но есть один дубликат блока выбора.

Отредактировано: чтобы добавить этот вопрос, я хочу сказать вам, что я прочитал документацию и метод по умолчанию. Тем не менее, никаких результатов.

Answer 1

Точно так же, как сказал Серг, вы должны правильно следовать документации .

<div class="container">
    <div class="row">
        <div class="col s6">
            <label>Num Pages Paginate</label>
            <select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
        <div class="col s6">
            <label>Num Ratings Edit</label>
            <select id="numRatingsEdit" name="numRatingsEdit">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('select').formSelect();
    });
</script>

Answer 2

Вы должны следовать документации и выполнить глобальную инициализацию одной строкой:

$('select').formSelect();