Установка MaximumSelectionLength в выпадающем списке select2 динамически? - PullRequest
Новая
       15

Установка MaximumSelectionLength в выпадающем списке select2 динамически?

0 голосов
/ 25 октября 2018

Это мой 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>

1 Ответ

0 голосов
/ 25 октября 2018 

$(".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>

Добавить событие изменения для первого выбора2.Внутри этого события изменения найдите его длину выделения и динамически создайте второй select2.Надеюсь, это поможет вам.

...