MaterialiseCss：如何使用JQuery在多選中啓用不同的複選框？

Question

我遇到問題在具有多個屬性的選擇框中啓用複選框。值在一個數組中。我想要啓用所有在數組中的複選框。我不知道如何傳遞值來選擇。當我給只有一個值

$("#select_box").val(values[0]); 

箱子工作正常這裏是小提琴 https://jsfiddle.net/dmtv02j8/3/

Answer 1

Aparantly你必須調用.material_select2('refresh')。這是你可以達到你想要的東西：

$(document).ready(function() { 
 
    var values = ['op1', 'op2']; 
 
    var selectEl = $('select'); 
 
    selectEl.material_select(); 
 
    selectEl.val(values); 
 
    selectEl.material_select('refresh'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/> 
 

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

Answer 2

只是傳遞數據，而不是數據[0]，它的工作原理

$('#list').material_select(); // initial initialization 
 
    
 
    
 
    // data from database via ajax 
 
    var data = ["op1","op2"]; 
 
    
 
    
 
    $('#list').val(data); 
 
    $('#list').material_select(); // re initalization on data change

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/> 
 
<div class="input-field col s12"> 
 
    <select multiple name="list[]" id="list"> 
 

 
    <option value="" disabled selected>Choose your option</option> 
 
    
 
    <option value="op1">op1</option> 
 
    <option value="op2">op2</option> 
 
    <option value="op3">op3</option> 
 
    <option value="op4">op4</option> 
 
    <option value="op5">op5</option> 
 

 
    </select> 
 
    <label style="color:#009688">List Of Category</label> 
 
</div>