How to configure a maximum selection limit for Bootstrap Form Select

Question

I have to add a limit to Form select control with multiple selections enabled

How to configure a maximum selection limit?

<select id="region" class="selectpicker" multiple data-live-search="true" onChange="getState(this.value);" data-title="Region">
  <option value="Africa">Africa</option>
  <option value="Asia-Pacific">Asia-Pacific</option>
  <option value="Europe">Europe</option>
  <option value="India">India</option>
  <option value="Mena">Mena</option>
  <option value="North America">North America</option>
  <option value="South America">South America</option>
</select>

Read more in [link](https://stackoverflow.com/questions/30474614/multiple-select-limit-number-of-selection) — Giang D.MAI, Jul 10 '19 at 05:56
What do you mean by limit 2? if after 2 options selected, user select another one what should happens? delete the last selected one or don't let user to select new one? — Pouria Moosavi, Jul 10 '19 at 05:58
@PouriaMoosavi let user to select only two option not more than that — easycodeeasy, Jul 10 '19 at 06:00
Never mind, it seems to work in jQuery. I tried based on `selectElement.value` in vanilla JavaScript and that was an issue. — StackSlave, Jul 10 '19 at 07:17
@StackSlave it worked for me but restion of option tag should get disabled — easycodeeasy, Jul 10 '19 at 10:33

StackSlave · Answer 1 · 2019-07-10T07:22:39.567

If you're using Vanilla JS:

function selectLimiter(selectElement, maximum, minimum){
  var o = selectElement.options, l = o.length, oldChange = selectElement.onchange;
  var max = maximum === undefined ? l : maximum;
  var min = minimum === undefined ? 0 : minimum; 
  for(var i=0,ops=[]; i<l; i++){
    ops[i] = o[i].selected;
  }
  selectElement.onchange = function(){
    if(oldChange)oldChange();
    var q = this.selectedOptions.length;
    if(q < min || q > max){
      for(var i=0; i<l; i++){
        o[i].selected = ops[i];
      }
    }
    else{
      for(var i=0; i<l; i++){
        ops[i] = o[i].selected;
      }
    }
  }
}
selectLimiter(document.getElementById('region'), 2);

<select id='region' title='Region' class='selectpicker' multiple='mulitple' size='7'>
  <option value='Africa'>Africa</option>
  <option value='Asia-Pacific'>Asia-Pacific</option>
  <option value='Europe'>Europe</option>
  <option value='India'>India</option>
  <option value='Mena'>Mena</option>
  <option value='North America'>North America</option>
  <option value='South America'>South America</option>
</select>

Otherwise, it's a duplicate.

How to configure a maximum selection limit for Bootstrap Form Select

1 Answers1