HTML 多选限制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4135210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Multiselect Limit
提问by Hafizul Amri
Is it possible to set limit to multipleselect?
是否可以为多选设置限制？
Below is an example code where user can select more than 1 value.
下面是一个示例代码，用户可以在其中选择 1 个以上的值。
<select multiple="multiple" name="choose">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
<option value="5">Value 5</option>
<option value="6">Value 6</option>
</select>
But, how to limit user to select not more than 3 value. Any idea?
但是，如何限制用户选择不超过 3 个值。任何的想法？
采纳答案by Alex Rashkov
You can use jQuery
你可以使用 jQuery
$("select").change(function () {
if($("select option:selected").length > 3) {
//your code here
}
});
回答by RedFilter
You would do this via javascript on the client side, and then add a check on the server side as well in case the client has disabled javascript.
您可以在客户端通过 javascript 执行此操作，然后在服务器端添加检查，以防客户端禁用 javascript。
Here is some basic client side code to give you an idea:
这是一些基本的客户端代码，可以让您了解：
<html>
<body>
<form onsubmit="validate()">
<select multiple="multiple" id="choose" name="choose">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
<option value="5">Value 5</option>
<option value="6">Value 6</option>
</select><br>
<input type="submit">
</form>
<script>
function validate()
{
var selectChoose = document.getElementById('choose');
var maxOptions = 2;
var optionCount = 0;
for (var i = 0; i < selectChoose.length; i++) {
if (selectChoose[i].selected) {
optionCount++;
if (optionCount > maxOptions) {
alert("validation failed, not submitting")
return false;
}
}
}
return true;
}
</script>
</body>
</html>
回答by arcyqwerty
Script that will disallow more than 3 elements to be selected (as opposed to just validating it at submit time).
不允许选择超过 3 个元素的脚本（而不是仅在提交时验证它）。
var verified = [];
document.querySelector('select').onchange = function(e) {
if (this.querySelectorAll('option:checked').length <= 3) {
verified = Array.apply(null, this.querySelectorAll('option:checked'));
} else {
Array.apply(null, this.querySelectorAll('option')).forEach(function(e) {
e.selected = verified.indexOf(e) > -1;
});
}
}
Note there's some additional complexity related to preventing the item from actually being selected on the selectand that it rather validates a user's actions and reverts it if it's invalid.
请注意，有一些额外的复杂性与防止在 上实际选择项目有关，select并且它会验证用户的操作并在它无效时将其还原。
回答by 08Hawkeye
RedFilter has the right idea with validating by javascript. Haven't tested, but you could do something like:
RedFilter 有正确的想法，通过 javascript 进行验证。尚未测试，但您可以执行以下操作：
var options = document.all.tags("option");<br>
var selectedCounter = 0;
for (var i=0; i < options.length; i++) {
if (options[i].selected) {
selectedCounter++;
}
checkCounter();
}
function checkCounter() {
//disable all options
}
