可以在 Materialise Select 多输入中实现 "Select All" 选项吗？

Question

我正在尝试在 Select 输入中为 Materialize Select Multiple 实施 Select All 选项。这个中的第二个解决方案应该很合适，但是将代码粘贴到我的文件中后，它根本不起作用，就好像没有JS代码一样。

这是我对上述解决方案的尝试

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // $('select').val([1]);
    $('select').formSelect();
    $('select.select_all').siblings('ul').prepend('<li id=sm_select_all><span>Select All</span></li>');
    $('li#sm_select_all').on('click', function () {
    var jq_elem = $(this), 
        jq_elem_span = jq_elem.find('span'),
        select_all = jq_elem_span.text() == 'Select All',
        set_text = select_all ? 'Select None' : 'Select All';
    jq_elem_span.text(set_text);
    jq_elem.siblings('li').filter(function() {
        return $(this).find('input').prop('checked') != select_all;
    }).click();
    });
})
</script>
</head> 

<div class = "row">
    <label>Materialize Select</label>
    <select class="select_all" multiple >
        <option value="" disabled selected>Choose your option</option>
        <option value = "1">Mango</option>
        <option value = "24">Orange</option>
        <option value = "3">Apple</option>
        <option value = "4">Cucumber</option>
        <option value = "5">Litchi</option>
    </select>              
</div>        
<script>M.AutoInit();</script>

除了有一个单独的按钮之外，有人知道实现此功能的方法或任何其他可能的替代方法吗？谢谢你。

Answer 1

您始终可以手动 select 所有选项，使用 jQuery 非常容易：

$('.select-wrapper .dropdown-content li').trigger('click');

Materialize select 实际上只是一个由文本输入触发的下拉列表 (UL > LI)。

但是，考虑到用户体验，您可能希望将其与 optgroup 联系起来，以便用户可以选择打开或关闭它们。它并不完美，因为我们没有开始的占位符，但是这个例子可以修改。

<select multiple>
    <optgroup label="Select All">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
</select>
<label>Select All Example</label>

和 jQuery，监听对 li.optgroup 的点击：

$('li.optgroup').on('click', function(){  
     $('li.optgroup-option').trigger('click');
});

可以在 Materialise Select 多输入中实现 "Select All" 选项吗？

Possible to implement "Select All" option in Materialize Select Multiple input?

html

javascript

css

multi-select

materialize