Materialize.css selectbox отображает повторяющиеся поля выбора

Я использую библиотеку 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>

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

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

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

1
0
327
2

Ответы 2

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

$('select').formSelect();

Я внимательно прочитал документацию и использовал вышеизложенное в качестве первого метода. Однако проблема все еще сохраняется.

Prashant Kumar 13.09.2018 22:20

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

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

Другие вопросы по теме