实现多选选项支持使用 jquery 进行最多四个选择答案

【问题标题】：materialize multi select option supports maximum four selection using jquery实现多选选项支持使用 jquery 进行最多四个选择
【发布时间】：2018-04-23 12:36:15
【问题描述】：

将此具体化多选选项设置为，选择最多支持 4 个选项。

$(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>

或任何设置最大限制以实现多选的方法。

【问题讨论】：

我想将前 4 个数组元素添加到新数组中。

标签： jquery materialize

【解决方案1】：

您可以使用slice 获取前 4 个选定选项。此外，您可以“刷新”将显示这些值的下拉列表。

唯一的事情是当您刷新下拉菜单时它会关闭并且无法通过代码打开它（就像我发现的那样）。

$(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>

【讨论】：

很高兴听到 :) 祝你好运！