实现所有选择中的全选选项 [英] Select all option in materialize multi select

问题描述

Bootstrap multisleect可以选择全选(例如此处).可以实现多选吗?

Bootstrap multisleect has option for select all (for example here). Is this possible in materialize multi select?

推荐答案

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

You can add them like this: 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:

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

这篇关于实现所有选择中的全选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！