是否可以在“物化选择多个输入”中实现“全选”选项?

问题描述 投票:0回答:1

我正在尝试在Select输入中实现Materialise Select Multiple的Select All选项。本question中的第二个解决方案应该非常合适,但是将代码粘贴到我的文件中之后,它根本无法工作,就像没有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>

除了拥有单独的按钮之外,是否有人知道实现此功能的方法或任何其他可能的替代方法?谢谢。

javascript html css materialize multi-select
1个回答
0
投票

您总是可以使用jQuery非常容易地手动选择所有选项:

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

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

但是,考虑到UX,您可能希望将其与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');
});
© www.soinside.com 2019 - 2024. All rights reserved.