Question

我在选择具有多个属性的框中启用复选框时遇到问题。值在数组中。

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

我想启用数组中的所有复选框。我无法弄清楚如何传递值来选择。当我只提供一个值

时，该框工作正常

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

这是小提琴 https://jsfiddle.net/dmtv02j8/3/

Answer 1

很可能你必须致电.material_select2('refresh')。这就是你如何实现你想要的目标：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

MaterializeCss：如何在多个选择中启用与JQuery不同的复选框？

2 个答案: