Haf*_*mri 16 html select limit
是否可以设置多重选择限制?
下面是一个示例代码,用户可以选择多个值.
<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>
Run Code Online (Sandbox Code Playgroud)
但是,如何限制用户选择不超过3个值.任何的想法?
Ale*_*kov 15
你可以使用jQuery
$("select").change(function () {
if($("select option:selected").length > 3) {
//your code here
}
});
Run Code Online (Sandbox Code Playgroud)
您可以通过客户端上的javascript执行此操作,然后在服务器端添加检查以防客户端禁用javascript.
这里有一些基本的客户端代码可以给你一个想法:
<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>
Run Code Online (Sandbox Code Playgroud)