Question

Bootstrap multisleect具有全选（for example here）的选项。这在物化多选中是否可行？

Answer 1

这是一个较小的版本：https://codepen.io/souvik1809/pen/rvNMyO

HTML

<div class = "row">
  <label>Materialize Multi Select</label>
  <select multiple class="select_all">
    <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>

的JavaScript

$(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();
    });
});

Answer 2

您可以像这样添加它们： https://codepen.io/anon/pen/XgEbRL?editors=1010

HTML：

  <div class="input-field col s12">
    <select multiple>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Multiple Select</label>
  </div>
  <a class="btn" onClick="javascript:selectAll()">Select all</a>
  <a class="btn" onClick="javascript:selectNone()">Select none</a>

JavaScript的：

var activateOption = function(collection, newOption) {
    if (newOption) {
        collection.find('li.selected').removeClass('selected');

        var option = $(newOption);
        option.addClass('selected');
    }
};

$(document).ready(function() {
    $('select').material_select();
    $('.test-input > .select-wrapper > .select-dropdown').prepend('<li class="toggle selectall"><span><label></label>Select all</span></li>');
    $('.test-input > .select-wrapper > .select-dropdown').prepend('<li style="display:none" class="toggle selectnone"><span><label></label>Select none</span></li>');
    $('.test-input > .select-wrapper > .select-dropdown .selectall').on('click', function() {
        selectAll();
        $('.test-input > .select-wrapper > .select-dropdown .toggle').toggle();
    });
    $('.test-input > .select-wrapper > .select-dropdown .selectnone').on('click', function() {
        selectNone();
        $('.test-input > .select-wrapper > .select-dropdown .toggle').toggle();
    });
});

function selectNone() {
    $('select option:selected').not(':disabled').prop('selected', false);
    $('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').prop('checked', '');
    //$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').trigger('click');
    var values = $('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:disabled').parent().text();
    $('input.select-dropdown').val(values);
    console.log($('select').val());
};

function selectAll() {
    $('select option:not(:disabled)').not(':selected').prop('selected', true);
    $('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:not(:checked)').not(':disabled').prop('checked', 'checked');
    //$('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:not(:checked)').not(':disabled').trigger('click');
    var values = $('.dropdown-content.multiple-select-dropdown input[type="checkbox"]:checked').not(':disabled').parent().map(function() {
        return $(this).text();
    }).get();
    $('input.select-dropdown').val(values.join(', '));
    console.log($('select').val());
};

在物化多选中选择所有选项

2 个答案: