Question

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

有没有办法在Materialise css中为下拉列表选择多选项？

任何信息都会有所帮助。

Answer 1

实体化工作人员发布了multiselect的版本：

只需添加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

MaterialiseCSS的下拉列实现不是<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类，以便MaterialiseCSS不会渲染它。

Answer 3

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

#topics_dropdown li {
  height: 3rem;
}

如何在Materialise css中获得多选下拉列表？

3 个答案: