时间戳

首页 > 解决方案 > 在select2下拉列表中动态设置maximumSelectionLength？

javascript - 在select2下拉列表中动态设置maximumSelectionLength？

问题描述

这是我的 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>

标签： javascriptjqueryhtmlselectjquery-select2

解决方案

$(".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。希望这会帮助你。

推荐阅读