Multiple Select Limit Number of Selection

Multiple Select limit number of selection

Try this...

Check length and deselect after reach maximum select

<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple">
    <option value="2">Bungee Jumping</option>
    <option value="3">Camping</option>
    <option value="5">Mountain Biking</option>
    <option value="6">Rappelling</option>
    <option value="7">Rock Climbing / Bouldering</option>
    <option value="8">Skiing</option>
    <option value="10">Wild Life (Safari)</option>
    <option value="11">Canoeing & Kayaking</option>
    <option value="12">Rafting</option>
    <option value="13">Sailing</option>
    <option value="14">Scuba Diving</option>
    <option value="15">Snorkeling</option>
    <option value="16">Surfing</option>
    <option value="18">Hang Gliding</option>
    <option value="19">Hot-air Ballooning</option>
    <option value="20">Micro-light Aircrafts</option>
    <option value="21">Paragliding</option>
    <option value="22">Paramotoring</option>
    <option value="23">Parasailing</option>
    <option value="24">Skydiving / Parachuting</option>
    <option value="25">Zip-line / Flying Fox</option>
    <option value="26">Caving</option>
    <option value="27">Cycling</option>
    <option value="28">Fishing & Angling</option>
    <option value="29">Motorbike trips</option>
    <option value="30">Nature Walks</option>
    <option value="31">Road Trips</option>
    <option value="32">Zorbing</option>
    <option value="33">Trekking Hiking and Mountaineering</option>
    <option value="34">Backpacking</option>
    <option value="61">Water</option>
</select>

    <script type="text/javascript">

        $(document).ready(function() {

          var last_valid_selection = null;

          $('#userRequest_activity').change(function(event) {

            if ($(this).val().length > 3) {

              $(this).val(last_valid_selection);
            } else {
              last_valid_selection = $(this).val();
            }
          });
        });
        </script>

DEMO:http://jsfiddle.net/9c3sevuv/

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

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);
    }
 }
});

HTML Multiselect Limit

You can use jQuery

  $("select").change(function () {
      if($("select option:selected").length > 3) {
          //your code here
      }
  });

How to set limit multiple select option

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>

How to limit Angular Material multiple select items to N items?

Set the selectionChange output event on the mat-select component, point it to your component function: (selectionChange)="changed()".

snippet:

<mat-select placeholder="Toppings" [formControl]="toppings" (selectionChange)="changed()" multiple>

In your component create a global variable named mySelections. This will store your selections :) It will hold an array of strings.

It looks like this:

mySelections: string[];

changed() {
  if (this.toppings.value.length < 3) {
    this.mySelections = this.toppings.value;
  } else {
    this.toppings.setValue(this.mySelections);
  }
}

Change the number 3 to N and presto, you're done.

Vue multi select limit option count

You can use the max prop for this:

Template:

<multiselect v-model="selectedOptions" :multiple="true" :options="optionsList" :hide-selected="true" :max="3"></multiselect>

---

Related Topics