Materialize.css 选择框渲染重复的选择框答案

【问题标题】：Materialize.css selectbox rendering duplicate select boxesMaterialize.css 选择框渲染重复的选择框
【发布时间】：2019-02-18 13:14:39
【问题描述】：

截至 2018 年，我正在使用 Materialize.css 库 (v 1.0.0) 为我的项目添加材质组件。但是，我没有用它初始化两个选择框。

我的页面中有两个选择框。

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

但是，当我使用它初始化两个选择框时，只有第一个有效。

此外，如果我在别处初始化脚本标记中的第二个选择框，该框会被初始化并正常工作，但有一个重复的选择框。

已编辑：要添加这个问题，我想告诉你我已经阅读了文档和默认方法。但是，没有结果。

【问题讨论】：

标签： css select materialize

【解决方案1】：

你应该follow documentation并用一行进行全局初始化：

$('select').formSelect();

【讨论】：

我已经仔细阅读了文档，并使用上述方法作为第一种方法。但是，问题仍然存在。

【解决方案2】：

正如 Serg 所说，您应该正确关注documentation。

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

【讨论】：