Question

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

Answer 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。希望对您有帮助。

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

1 个答案: