구체화 멀티 선택에서 모든 옵션을 선택하십시오.

Question

부트 스트랩 다중 선택에는 모두 선택 (for example here) 옵션이 있습니다. 멀티 셀을 구현할 때 이것이 가능합니까?

Answer 1

당신은 다음과 같이 추가 할 수 있습니다 : 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> 

자바 스크립트 :

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