How to get multi select dropdown in Materialize css?

问题

I am working on a project which uses Materialize css for front end.

Is there any way to get multi select option for dropdown in Materialize css ?

Any piece of info would be helpful.

回答1:

The materialize staff released a version with multiselect:

just add the 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>

And then call js:

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

jsfiddle

回答2:

MaterializeCSS's dropdown implementation is not a <select> block. It is just a styled <ul>. Therefore, I don't believe you can take advantage of a multi-select with their implementation. I would use the default <select> block like this:

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

Note: you must add the browser-default class so that MaterializeCSS doesn't render it.

回答3:

Since the top and left css properties of the label are set to ~0.8rem each, you can add a specific rule to the li's:

#topics_dropdown li {
  height: 3rem;
}

来源：https://stackoverflow.com/questions/30207047/how-to-get-multi-select-dropdown-in-materialize-css