CODEWITHSUNDEEP
jqueryhtml
USER10
USER10

Reputation: 974

How to set limit multiple select option

<select id='optgroup' class="searchable" multiple='multiple'>
    <option value='11'>Maths</option>
              <option value='12'>Physics</option>
              <option value='13'>Chemistry</option>
              <option value='14'>Biology</option>
              <option value='15'>Computer Science</option>
              <option value='16'>Accounts</option>
              <option value='17'>Commerce</option>
              <option value='18'>Business Maths</option>
              <option value='19'>Economics</option>
              <option value='20'>History</option>
</select>

Demo

This demo i used MultipleSelect[http://loudev.com/] Jquery plugin .

i want to set limit for selectable items. For Example select only any 4 items.

$('#optgroup').multiSelect({ selectableOptgroup: true ,
      selectableHeader: "<input type='text' class='form-control category-seletable ' autocomplete='off' placeholder='Search'>",
  selectionHeader: "<input type='text' class='form-control category-selection' autocomplete='off' placeholder='Search'>",

      });

i tried this . But not working for me.

Upvotes: 0

Views: 884

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

You can use the afterSelect() callback and deselect() to do this.

this.$selectionUl is the right area with all the options display: none(yes, all of them), those seleted options would set display to list-item and add a class .ms-selected. So we can calculate the selected numbers through $(this.$selectionUl).find('.ms-selected').length, if the numbers of selected options is greater than 4, then deselect the one just selected.

$("#optgroup").multiSelect({
  selectableOptgroup: true,
  selectableHeader: "<input type='text' class='form-control category-seletable ' autocomplete='off' placeholder='Search'>",
  selectionHeader: "<input type='text' class='form-control category-selection' autocomplete='off' placeholder='Search'>",
  afterSelect: function(data) {
    // data is an array within the values of the options just being selected
    if ($(this.$selectionUl).find('.ms-selected').length > 4) {
      // deselect the item with the value given in parameter(data)
      // the value can be either an array of string or a string
      $("#optgroup").multiSelect('deselect', data);
      console.log('You can only select 4 items!!')
    }
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js"></script>
<select id='optgroup' class="searchable" multiple='multiple'>
  <option value='11'>Maths</option>
  <option value='12'>Physics</option>
  <option value='13'>Chemistry</option>
  <option value='14'>Biology</option>
  <option value='15'>Computer Science</option>
  <option value='16'>Accounts</option>
  <option value='17'>Commerce</option>
  <option value='18'>Business Maths</option>
  <option value='19'>Economics</option>
  <option value='20'>History</option>
</select>

Upvotes: 2

Related Questions