具体化CSS选择多个-如何在没有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问题，因为我还将有服务器代码来验证后端的选择数量。但是，如果用户试图选择超出允许范围的选项，则必须有一种优雅的方法来取消选择。所有这些都使用了物化.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>

你。