在select2下拉列表中动态设置maximumSelectionLength？答案

【问题标题】：Setting maximumSelectionLength in select2 dropdown dynamically?在select2下拉列表中动态设置maximumSelectionLength？
【发布时间】：2018-10-25 06:40:54
【问题描述】：

这是我的 HTML 有两个选择，一个用于下拉列表中的多项选择，另一个用于标记。

如果选择的项目数为3，那么用户应该只能添加3个标签，不超过3个，不低于3个

$(".js-example-basic-multiple").select2({
    maximumSelectionLength: 8,
});
var selectedValues = $('#paper').val();
var len = selectedValues.length;
$(".js-tags").select2({
    tags: true,
    maximumSelectionSize: len,
    tokenSeparators: [',', ' ']
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<select class="js-example-basic-multiple form-control" multiple="multiple" name="paper" id="paper">
    <option value="OP">OP</option>
    <option value="needs">Needs</option>
    <option value="some">some</option>
    <option value="help">help</option>
    <option value="with">with</option>
    <option value="Jquery">Jquery</option>
</select>

<select class="js-tags form-control" multiple="multiple" name="paper_used" id="paper_used">
    <option value="__None"></option>
</select>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

【问题讨论】：

标签： javascript jquery html select jquery-select2

【解决方案1】：

$(".js-example-basic-multiple").select2({
    maximumSelectionLength: 8,
});
var selectedValues = $('#paper').val();
var len = selectedValues.length;
$(".js-example-basic-multiple").on("change", function (e) { 
 selectedValues = $('#paper').val();
 len = selectedValues.length;
 console.log(len);
 $(".js-tags").select2({
  tags: true,
    tokenSeparators: [',', ' '],
    maximumSelectionLength: len
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<select class="js-example-basic-multiple form-control" multiple="multiple" name="paper" id="paper">
    <option value="OP">OP</option>
    <option value="needs">Needs</option>
    <option value="some">some</option>
    <option value="help">help</option>
    <option value="with">with</option>
    <option value="Jquery">Jquery</option>
</select>

<select class="js-tags form-control" multiple="multiple" name="paper_used" id="paper_used">
    <option value="__None"></option>
</select>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

为第一个 select2 添加更改事件。在该更改事件中找到其选择长度并动态创建第二个 select2。希望这会对你有所帮助。

【讨论】：