Materialise select 未在模态中显示

Question

我有可以正常工作的模态，在模态内部我有 select 这样的字段：

<select name="" id="">
  <option value="">test</option>
  <option value="">test 1</option>
  <option value="">test 2</option>
</select>

我的初始化：

$(document).ready(function () {
        $('.modal').modal();
        $('select').formSelect();
    });

它在外部模式下有效，因此可能需要应用一些 css 更改。正常工作 select 外部模态 select 代码打开时如下所示：

<ul id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c4047" class="dropdown-content select-dropdown" tabindex="0" style="display: block; width: 1182.11px; left: 0px; top: -238.984px; height: 284.98px; transform-origin: 0px 100% 0px; opacity: 1; transform: scaleX(1) scaleY(1);"><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40470" tabindex="0" class=""><span>test</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40471" tabindex="0"><span>test 1</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40472" tabindex="0"><span>test 2</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40473" tabindex="0"><span>test 2</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40474" tabindex="0" class=""><span>test 2</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40475" tabindex="0" class="selected"><span>test 2</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40476" tabindex="0"><span>test 2</span></li></ul>

不知道如何在此处显示可读性（这是我的第一个问题）所以基本上，它会计算高度和其他 css 本身，但在模态中它看起来像这样： Here screenshot

和select打开时浏览器中的字段代码：

<ul id="select-options-f505c135-4908-3edb-6944-32b5e7f00630" class="dropdown-content select-dropdown" tabindex="0" style="display: block; width: 584.453px; left: 0px; top: 0px; height: 0px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);"><li class="disabled selected" id="select-options-f505c135-4908-3edb-6944-32b5e7f006300" tabindex="0"><span>Выберите роль</span></li><li id="select-options-f505c135-4908-3edb-6944-32b5e7f006301" tabindex="0"><span>Менеджер</span></li><li id="select-options-f505c135-4908-3edb-6944-32b5e7f006302" tabindex="0"><span>"Покупатель"</span></li><li id="select-options-f505c135-4908-3edb-6944-32b5e7f006303" tabindex="0"><span>Admin</span></li></ul>

如您所见，所有字段中的计算现在都为零。搜索了几个小时，但在我的案例中没有找到确切的答案。

这里我还包括：

{{--Material--}} <link href="css/materialize.min.css" rel="stylesheet"> {{-- Material --}} <script src="js/materialize.min.js"></script>

Answer 1

所以我自己想出来了，因为我的页面上几乎没有 select，但在这种情况下我只有一个，无论如何都是实现所有内容的最佳方式 select，工具提示和其他东西来自 jquery，尤其是当每个元素很少时，最好为每个元素提供不同的 class 或 id。

$('#select1').formSelect();
$('#select2').formSelect();
$('.select3').formSelect();
$('.tooltipped').tooltip();
$('.tooltipped2').tooltip();

p.s。我应该提到，具有相同 class 的大多数不同元素也可以工作，但请记住，这个错误或任何类似我的错误都可能发生。

也使用 " 更适合例如

$("#role").formSelect();

如果您在模态显示时遇到问题。

如果有人能向我解释一下就好了，它是 materialize 库中的某些功能还是什么else.Sorry我是前端新手，所以这真的很有帮助。

Materialise select 未在模态中显示

Materialize select not displaying in modal

materialize