jquery - 物化CSS |使用多选，无法预选所有选项

Question

我正在尝试使用 materialized css 实现多选元素对于一个网站。应该预先选择所有“选项”标签。所以我写了这个:

$(document).ready(function() {
    var select = $('#visa-type-selection');
    $(select).find("option").prop('selected', true);
    $('#visa-type-selection').material_select();
    alert($( "#visa-type-selection" ).val());
});

此代码实际上是选择所有“选项”。下面的警报代码给出了这张图片。

但是 Material 选择项看起来像这样:

当我点击元素时，我看到“选项”的复选框都没有被选中:

具体化创建一个“ul”，并为每个选项在其中创建一个复选框 + 标签，我想如果你不发送 onClick 操作就无法检查它们。这是添加的 HTML 物化:

<ul id="select-options-edd3cffe-6107-b8e0-322b-51f667907794" class="dropdown-content select-dropdown multiple-select-dropdown active"
    style="width: 458px; position: absolute; top: 0px; left: 0px; opacity: 1; display: block;">
    <li class=""><span><input type="checkbox"><label></label>Shengen</span></li>
    <li class=""><span><input type="checkbox"><label></label>İş</span></li>
    <li class=""><span><input type="checkbox"><label></label>Öğrenci</span></li>
    <li class=""><span><input type="checkbox"><label></label>Turist</span></li>
    <li class=""><span><input type="checkbox"><label></label>Emekli</span></li>
    <li class=""><span><input type="checkbox"><label></label>Erasmus</span></li>
</ul>

我找不到解决方法，因为“ul”标签的生成 ID 每次创建时都会发生变化。

任何帮助都会很棒。谢谢。

Answer 1

我完全同意你说的。您可以做的是应用 jquery .prev() 方法并访问所有 ul 标签。我所做的是:- 它帮助我进行了预选。您必须同时访问 li 并向它们添加 Active 类。

var a=$('#id_of_multiselect').prev().find(":checkbox");
                    for(var i=0;i<=length_of_list;i++)
                    {
                        a[i].checked=true;
                    }
            $('#egg_events').val(vals).trigger('update');