materialize multi select option supports maximum four selection using jquery

Question

set this materialize multi select option as, selection support only upto 4 options.

$(document).on('change', '#selectCountries', function() {
  var countriesArr = $(this).val();
  if (countriesArr.length > 4) {
    alert('only supports maximum 4 countries');
    countriesArr = []; // set first 4 elements of array to this variable.
    // reload the array to multiselect.
    $('#selectCountries').val(countriesArr);
  }
});

$('#selectCountries').material_select();

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified CSS -->
<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/0.97.5/js/materialize.min.js"></script>

<select multiple id="selectCountries">
  <option value="0" disabled="" selected=""> Select a Country</option>
  <option value="2">United Arab Emirates</option>
  <option value="44">Cameroon</option>
  <option value="41">U.K</option>
  <option value="9">Angola</option>
  <option value="45">Chad</option>
  <option value="13">Austria</option>
  <option value="14">Australia</option>
  <option value="20">Belgium</option>
</select>

or any method to set maximum limit to materialize multi select.

Answer 1

You can use slice to get the first 4 selected options. Also, you can "refresh" the dropdown that will present these values.

The only thing is when you refresh the dropdown it close and there is no way to open it by code (as much as I found).

$(document).on('change', '#selectCountries', function() {
  var countriesArr = $(this).val();
  if (countriesArr.length > 4) {
    alert('only supports maximum 4 countries');
    countriesArr = countriesArr.slice(0, 4);
    // reload the array to multiselect.
    $('#selectCountries').val(countriesArr).material_select();
  }
});

$('#selectCountries').material_select();

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified CSS -->
<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/0.97.5/js/materialize.js"></script>

<select multiple id="selectCountries">
  <option value="0" disabled="" selected=""> Select a Country</option>
  <option value="2">United Arab Emirates</option>
  <option value="44">Cameroon</option>
  <option value="41">U.K</option>
  <option value="9">Angola</option>
  <option value="45">Chad</option>
  <option value="13">Austria</option>
  <option value="14">Australia</option>
  <option value="20">Belgium</option>
</select>