javascript - 如何使用js或j查询根据外部值限制selectpicker多重选择

Question

我想根据组成员计数值动态更改最大可选值。我在 selectpicker 插件中对多个部分使用多个选择

这是我的表格

<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>     

我不知道如何使用 javascript 限制选择。请帮忙。

Answer 1

您应该使用 SELECT 属性“data-max-options”，并在每次更改此属性的值时刷新选择器。这是一个简单的例子: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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abbae7b9afa6afa9be8afbe4fbf9e4f3" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b4e9b7a1a8a1a7b084f5eaf5f7eafd" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/i18n/defaults-*.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d489d7c1c8c1c7d0e4958a95978a9d" rel="noreferrer noopener nofollow">[email protected]</a>/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>