Come ottenere il multi-dropdown in Materialize css?

Question

Sto lavorando a un progetto che utilizza Materialise css per front-end.

C'è un modo per ottenere un'opzione di selezione multipla per il menu a discesa in Materialize css?

Qualsiasi informazione potrebbe essere utile.

Answer 1

L'implementazione del dropdown di MaterializeCSS non è un blocco <select>. È solo uno stile <ul>. Pertanto, non credo che tu possa trarre vantaggio da una selezione multipla con la loro implementazione. Vorrei utilizzare il blocco di default <select> come questo:

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

Nota: è necessario aggiungere la classe browser-default in modo che MaterializeCSS non rendono.

Answer 2

Poiché le proprietà superiore e sinistro css del marchio sono impostate per ~ 0.8rem ciascuno, è possibile aggiungere una regola specifica per il Li:

#topics_dropdown li { 
    height: 3rem; 
} 

Answer 3

Il personale Materialise ha rilasciato una versione con multiselect:

basta aggiungere il 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> 

e quindi chiamare js:

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

jsfiddle