Hi iamWooky,
Refer the below code that will full-fill your requirement.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#SelectedIndustryList').maxLimitSelect(8, 'You can select only maximum 8 industries.');
});
$.fn.maxLimitSelect = function (max, message) {
if (!max || !/^\d+$/.test(max)) return this;
return this.each(function () {
$(this).bind("click change keypress", { max: max }, function (event) {
var options = $('option', this);
var max = event.data.max;
var selected = $('option:selected', this);
var indexes;
if (selected.length === max) {
indexes = $.map(options, function (e, i) {
if (e.selected) {
return i;
}
});
$.data(this, "indexes", indexes);
}
else if (selected.length > max) {
indexes = $.data(this, "indexes");
options.removeAttr('selected').each(function () {
var $this = $(this);
if ($.inArray($this.prevAll().length, indexes) !== -1) {
$this.attr('selected', 'selected');
}
});
alert(message);
}
});
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select name="SelectedIndustryList" multiple="multiple" id="SelectedIndustryList"
style="height: 200px;">
<option value="1">Industries 1</option>
<option value="2">Industries 2</option>
<option value="3">Industries 3</option>
<option value="4">Industries 4</option>
<option value="5">Industries 5</option>
<option value="6">Industries 6</option>
<option value="7">Industries 7</option>
<option value="8">Industries 8</option>
<option value="9">Industries 9</option>
<option value="10">Industries 10</option>
</div>
</form>
</body>
</html>
Demo