Это будет сделано, хотя есть небольшая «вспышка» выбора (вы можете захотеть, чтобы под <select> не отображалось <span>, чтобы сказать что-то вроде Максимальный выбор достигнут).
$('#mySelect').click(function(e) {
if ($('option:selected',this).length > 5) {
$(e.target).removeAttr('selected');
}
});
Я оставлю это как упражнение для вас, чтобы заставить его работать и с селективностью клавиатуры.
Вот вам Рабочая демоверсия
EDIT:
Хорошо, я признаю, что это не первый раз, когда меня ужалили, когда я тоже не тестировал ответ в IE (кажется, что много проблем с элементами <select> в IE), но здесь Это гибкое решение, которое я протестировал в IE 6 и Firefox 3.5.3, и оно работает в обоих. Я обернул его в плагин, на случай, если это понадобится на нескольких страницах
(function($) {
$.fn.maxLimitSelect = function(max) {
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');
}
});
}
});
});
}
})(jQuery);
Тогда использовать, это просто
$('#mySelect').maxLimitSelect(5);
передавая максимальное количество элементов, которые могут быть выбраны. Это работает с выбором клавиш и мыши в протестированных версиях IE и Firefox, хотя интересно, что IE 6 не поддерживает удержание Ctrl и Пробел для выбора нескольких элементов, но позволяет удерживая Shift , выберите несколько смежных элементов. Плагин ограничивает это переданным максимумом.
Вот Рабочая демоверсия