我正在尝试在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>
除了拥有单独的按钮之外,是否有人知道实现此功能的方法或任何其他可能的替代方法?谢谢。
您总是可以使用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');
});