how to limit selectpicker multiple select according to external value using js or j query

Question

I want to change the maximum selectable value dynamically according to the Group member Count value. I use multiple select in selectpicker plugin for multiple section

here is my form

<div class="form-group has-label">
    <label>
      Contact No
      <star class="star">*</star>
    </label>
    <input class="form-control" name="contact" id="contact" type="text"  />
 </div>
 <div class="form-group has-label">
    <label>
       Group member count
       <star class="star">*</star>
    </label>
    <input class="form-control" onchange="count();" name="memcount" id="memcount" type="number"  />
  </div>
  <div class="form-group has-label">
  <label>
     Select Members
     <star class="star">*</star>
     </label>
     <select multiple data-title="Select Members" name="members" id="members" class="selectpicker" data-style="btn-default btn-outline" data-menu-style="dropdown-blue">
          <option value="1">value 1</option>
          <option value="2">value 1</option>
          <option value="3">value 1</option>
          <option value="4">value 1</option>
      </select>
  </div>     

I don't know how to limit the selection using javascript. please help.

Answer 1

You should use a SELECT attribute "data-max-options" and refresh select picker every time you change a value of this attribute. Here's a simple exapmle: https://jsfiddle.net/Denisdude/jzk0fsc2/8/

$(document).ready(function () {

	
    $('#memcount').on('change', function (e) {
        var count = parseInt($(this).val());
        
        // set limit to SELECT tag
        if (count > 0) {
        	$('#members').data('max-options', count)
        }
        
        // here you can remove extra values from SELECT
        var values = $('#members').val(); 
        if (values.length > count) {
            // how many items we need to remove
            var toRemove = values.length - count;
            $('#members option:selected').each(function (index, item) {
              if (toRemove) {
                var option = $(item);
                option.prop('selected', false);
                toRemove--;
              }
            });
        }
        
		// update selectpickers
        $('.selectpicker').selectpicker('refresh');
    });
    

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>




<div class="form-group has-label">
    <label>
      Contact No
      <star class="star">*</star>
    </label>
    <input class="form-control" name="contact" id="contact" type="text"  />
</div>
<div class="form-group has-label">
    <label>
       Group member count
       <star class="star">*</star>
    </label>
    <input class="form-control" value="1" name="memcount" id="memcount" type="number" min="1"  />
</div>
<div class="form-group has-label">
  <label>
     Select Members
     <star class="star">*</star>
   </label>
   
   <!-- data-max-options="1" -->
   <select multiple data-title="Select Members" data-max-options="1" name="members" id="members" class="selectpicker" data-style="btn-default btn-outline" data-menu-style="dropdown-blue">
      <option value="1">value 1</option>
      <option value="2">value 2</option>
      <option value="3">value 3</option>
      <option value="4">value 4</option>
      <option value="2">value 5</option>
      <option value="3">value 6</option>
      <option value="4">value 7</option>
      <option value="2">value 8</option>
      <option value="3">value 9</option>
      <option value="4">value 10</option>
    </select>
    
</div>