css - 如何在 Materialise css 中获得多选下拉菜单？

Question

我正在开发一个使用 Materialize css 作为前端的项目。

有没有办法在 Materialize css 中获得多选选项？

任何信息都会有所帮助。

Answer 1

您只需添加multiple：

<div class="input-field col s12">
    <select multiple>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Multiple Select</label>
</div>

然后调用js：

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

jsfiddle

Answer 2

MaterializeCSS 的下拉实现不是一个<select>块。它只是一个风格化的<ul>. 因此，我不相信您可以通过它们的实现来利用多选。我会<select>像这样使用默认块：

<select class="browser-default" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

注意：您必须添加browser-default该类，以便 MaterializeCSS 不会呈现它。

Answer 3

由于标签的顶部和左侧 css 属性分别设置为 ~0.8rem，因此您可以向 li 添加特定规则：

#topics_dropdown li {
  height: 3rem;
}