Materialize CSS Select Multiple - 如何在没有 jQuery 的情况下限制选择的数量

Question

这是我第一次使用 Materialzie CSS，希望我选择了一个轻量级的 CSS 框架。最新版本 1.0.0 不需要 jQuery 作为依赖项，所以我刚刚初始化 Materialize：

document.addEventListener('DOMContentLoaded', function() {
var instances = M.AutoInit();
});

我的问题是尝试限制用户可以使用选择下拉菜单选择的选项数量。我见过几个引用 jQuery 的示例，但没有一个使用 Materialize 本机 js。这是我的下拉代码：

<form>
<div class="input-field">
<select name="test" id="seltest" multiple>
<option value="" disabled >Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<label>Materialize Multiple Select</label>
</div>
</form>

那么，什么是挂钩选择并限制用户可以选择的选项数量的最简单方法？这主要是客户端/UI 问题，因为我还将使用服务器代码来验证后端的选择数量。但是，如果用户尝试选择的选项超出了允许的范围，则必须有一种优雅的方式来取消选择选项。全部使用 materialize.js 而不是 jQuery。

非常感谢，喜欢学习这个新的 CSS 框架。

Answer 1

希望有帮助

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

function selectbox(select) {
  var result = [];
  var options = select && select.options;
  var meterial_select = document.getElementsByTagName("li");
  var opt;

  for (var i = 0, iLen = options.length; i < iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }

  for (var j = 0; j < options.length; j++) {
    (result.length >= 3 && !options[j].selected) ? options[j].disabled = true: options[j].disabled = false;
    (result.length >= 3 && !options[j].selected) ? meterial_select[j].classList.add("disabled"): meterial_select[j].classList.remove("disabled");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<form>
  <div class="input-field">
    <select name="test" id="seltest" onChange='selectbox(this)' multiple>
      <option value="" disabled>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
    </select>
    <label>Materialize Multiple Select</label>
  </div>
</form>

你。