MaterializeCss：複数選択でJQueryで異なるチェックボックスを有効にするにはどうすればいいですか？

Question

問題が発生しています複数の属性を持つ選択ボックスでチェックボックスを有効にしてください。値は配列内にあります。

var values = ["op1","op2","op3","op4"]; 

アレイ内にあるすべてのチェックボックスを有効にしたいとします。私は選択のために値を渡す方法を理解できません。私はここに一つの値だけ

$("#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>