Is it possible to set limit to multipleselect?
Below is an example code where user can select more than 1 value.
<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?
You can use jQuery
$("select").change(function () {
if($("select option:selected").length > 3) {
//your code here
}
});
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.
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>
Script that will disallow more than 3 elements to be selected (as opposed to just validating it at submit time).
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 select and that it rather validates a user's actions and reverts it if it's invalid.
RedFilter has the right idea with validating by javascript. Haven't tested, but you could do something like:
var options = document.all.tags("option");
var selectedCounter = 0;
for (var i=0; i < options.length; i++) {
if (options[i].selected) {
selectedCounter++;
}
checkCounter();
}
function checkCounter() {
//disable all options here
}
