CODEWITHSUNDEEP
javascriptjquerymultiple-select
kanu mahajan
kanu mahajan

Reputation: 109

how to select limit number of options in multiple select plugin?

I am new in jquery.

I am using multiple select plugin jquery.

I want that the user can't select more than 3 options.

Here I have also disabled the selectall option.

Here is my code:

<select multiple id='testbox'>
  <option value='1'>First Option</option>
  <option value='2'>Second Option</option>
  <option value='3'>Third Option</option>
  <option value='4'>Fourth Option</option>
  <option value='5'>Fifth Option</option>
</select>

Jquery code:

$("select").multipleSelect({
    selectAll: false
 });

Please help me. Thanks in advance :)

Upvotes: 0

Views: 6626

Answers (3)

EA-Lille
EA-Lille

Reputation: 561

EDIT :

There working jsFiddle example with multi-select plugin

var limit = 3;

var $multiSel = $("select").multipleSelect({
placeholder: "Here is the placeholder",
width: 200,
filter: true,
selectAll: false,
onClick: function(view) {
    var $checkboxes = $multiSel.next().find("input[type='checkbox']").not(":checked");
    var selectedLen = $multiSel.multipleSelect('getSelects').length;
    if (selectedLen >= limit) {
       $checkboxes.prop("disabled", true);
    } else {
       $checkboxes.prop("disabled", false);
    }
 }
});

Upvotes: 1

Rahul
Rahul

Reputation: 2474

You could do 

if($("select").multipleSelect("getSelects").length > 3)
{
   alert('Not allowed');
}

Upvotes: 0

Dinesh undefined
Dinesh undefined

Reputation: 5546

add change event for select and check for length of selected options 

  $("select").change(function () {
      if($("select option:selected").length > 3) {
          // you can disable rest of the things here
      }
  });

Upvotes: 0

Related Questions