Setting the minimum and maximum number of selections in a multiple window

Question

I am trying to set the minimum and maximum selection values ​​for a multiple selection field.

I saw something like this for a list of radio buttons (only for maximum value) here http://jsfiddle.net/rREfg/1/

var maxCheckedCount = 5;
var maxCheckedAlertMessage = 'Woops! Too many selected!';

    jQuery('input[type=checkbox]').click(function(){
        var n = jQuery('input:checked').length;
        if(n>=maxCheckedCount){
            jQuery(this).prop('checked',false);
            alert(maxCheckedAlertMessage);
        }
    });

Now if this is my new html

<select multiple size=7>
    <option value="1">Strawberry</option>
    <option value="2">Prune</option>
    <option value="3">Lemon</option>
    <option value="4">Peach</option>
    <option value="5">Apple</option>
    <option value="6">Banana</option>
    <option value="7">Orange</option>
</select>

How can I tweak the code to get a minimum selection of 2 elements and a maximum selection of 5 elements?

Answer 1

You can achieve it like this

HTML

<select multiple size=7>
   <option value="1">Strawberry</option>
   <option value="2">Prune</option>
   <option value="3">Lemon</option>
   <option value="4">Peach</option>
   <option value="5">Apple</option>
   <option value="6">Banana</option>
   <option value="7">Orange</option>
</select>

JQuery

var maxCheckedCount = 5;
var maxCheckedAlertMessage = 'Woops! Too many selected!';

jQuery('select').change(function(event) {
    var n = $(this).children(':selected').length;
    if(n >= maxCheckedCount){
        $(this).children().prop('selected',false);
        alert(maxCheckedAlertMessage);
        return false;
    }
});
jQuery('.checkValid').click(function()
{
    if($('select').children(':selected').length <= 2) {
       alert('Keep Adding');
       return false;
    }
});

var maxCheckedCount = 5;
    var maxCheckedAlertMessage = 'Woops! Too many selected!';

        jQuery('select').change(function(event) {
            var n = $(this).children(':selected').length;
            if(n >= maxCheckedCount){
                $(this).children().prop('selected',false);
                alert(maxCheckedAlertMessage);
                n = maxCheckedCount;
                return false;
            }
        });
        jQuery('.checkValid').click(function()
        {
           if($('select').children(':selected').length <= 2) {
              alert('Keep Adding');
              return false;
           }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size=7>
    <option value="1">Strawberry</option>
    <option value="2">Prune</option>
    <option value="3">Lemon</option>
    <option value="4">Peach</option>
    <option value="5">Apple</option>
    <option value="6">Banana</option>
    <option value="7">Orange</option>
</select>
<button class='checkValid'>Clike Me!</button>

Run codeHide result

Answer 2

Here you will find the solution https://jsfiddle.net/9k1sgbjz/1/

var selectedOption = [];
$('select option').click(function(){
	var index = selectedOption.indexOf($(this).text());
	if( index < 0){
  	// insert
    selectedOption.push($(this).text());
  }else{
  	// remove
    selectedOption.splice(index, 1);
  }
  if( selectedOption.length < 2 || selectedOption.length === 5){
  	$('button').prop('disabled', true);
  }else{
  	$('button').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size=7>
    <option value="1">Strawberry</option>
    <option value="2">Prune</option>
    <option value="3">Lemon</option>
    <option value="4">Peach</option>
    <option value="5">Apple</option>
    <option value="6">Banana</option>
    <option value="7">Orange</option>
</select>

<button type="submit" disabled>
Submit
</button>

Run codeHide result

/ , . p >