Разрешить теги в элементах Select2 - PullRequest
Новая
       11

Разрешить теги в элементах Select2

0 голосов
/ 16 декабря 2018

Я пытался включить теги для элементов select2, когда у них есть определенный класс 

$(".select2Tags").each(function(index, element) {
    $(this).select2({
        tags: true
    });
});

Но разрешение новых тегов не работает.Как я могу заставить это работать?

Ответы [ 3 ]

0 голосов
/ 05 января 2019

Из документации плагина select2 можно прочитать:

В дополнение к предварительно заполненному меню параметров, Select2 может динамически создавать новые параметры из текстового ввода пользователем впоисковая строка.Эта функция называется «тегирование».Чтобы включить тегирование, установите для параметра тегов значение true.

И

Обратите внимание, что при включенном тегировании пользователь может выбрать один из существующих параметров или создать новый.выберите первый вариант, который пользователь ввел в поле поиска.

Сначала вы можете проверить следующие основные примеры использования этой функции.Если в select2 включена опция tags, это позволит вам создать новый временный тег с помощью поля поиска.Когда вы создаете новый тег и после этого выбираете новый параметр, предыдущий созданный тег исчезает, поскольку они не добавляются навсегда как новый параметр выбора.

Основные примеры: 

$(document).ready(function()
{
    // Initialize first select without using tags.

    $(".select2").select2(
    {
        placeholder: 'Select an option'
    });

    // Initialize second select with tags enabled.

    $(".select2tag").select2(
    {
        placeholder: 'Select an option',
        tags: true
    });

    // Initialize third select with tags and multiple options enabled.

    $(".select2tagMultiple").select2(
    {
        tags: true,
        multiple: true
    });
});
select {
    width: 90vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<h3>Select without tags:</h3>
<p>You are only able to select one of the available options</p>
<select class="select2">
  <option></option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
  <option value="IT">Italy</option>
  <option value="ES">Spain</option>
  <option value="BE">Belgium</option>
</select>
<br>

<h3>Select with tags enabled</h3>
<p>You can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far</p>
<select class="select2tag">
  <option></option>
  <option value="AR">Argentina</option>
  <option value="BR">Brazil</option>
  <option value="CL">Chile</option>
  <option value="CO">Colombia</option>
  <option value="UY">Uruguay</option>
</select>
<br>

<h3>Select with tags and the multiple option enabled</h3>
<p>You can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far. This also enables the possibility to create multiple tags.</p>
<select class="select2tagMultiple">
  <option value="D">Dog</option>
  <option value="C">Cat</option>
  <option value="B">Bird</option>
  <option value="H">Horse</option>
  <option value="F">Frog</option>
</select>

Однако я могу предположить, что ни один из предыдущих примеров не удовлетворит ваш вопрос.Для плохой редакции, которую вы сделали, я предполагаю, что вы хотите 1) динамически включать / отключать опции tags или 2) a , не кратные выберите с включенной опцией tags, что позволит вам добавить более одного tag.

1) Подход для динамического включения / выключения тегов.

Если вам нужно включить / отключитьдинамически помечает опции выбора, затем просто повторно инициализирует плагин, как показано в следующем фрагменте: 

$(document).ready(function()
{
    // Initialize an standard select2.

    $(".select2").select2(
    {
        placeholder: 'Select an option'
    });

    // Register a listener on the change event of checkbox for
    // dynamically enable/disable the tags option.

    $("#cbTags").change(function()
    {
        var cfg = {
            placeholder: 'Select an option'
        };

        if ($(this).is(":checked"))
            cfg.tags = true;

        $(".select2tag").select2(cfg);
    });
});
select {
    width: 90vw;
}

.custom {
    margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="select2 select2tag">
  <option></option>
  <option value="AR">Argentina</option>
  <option value="BR">Brazil</option>
  <option value="CL">Chile</option>
  <option value="CO">Colombia</option>
  <option value="UY">Uruguay</option>
</select>
<div class="custom">
  <label><b>Enable Tags</b></label>
  <input type="checkbox" id="cbTags">
</div>

2) Подход для включения создания нескольких тегов.

Привязка слушателя к событию change.Плагин select2 добавляет атрибут с именем data-select2-tag к параметрам, созданным с помощью функции тегов.Эти параметры удаляются при переходе на другой доступный параметр (т. Е. Временные).Таким образом, при каждом событии change мы собираемся удалить эти атрибуты, чтобы обмануть плагин и предотвратить его удаление.Вы можете проверить следующий код: 

$(document).ready(function()
{
    // Initialize the select with tags enabled.

    $(".select2tag").select2(
    {
        placeholder: 'Select an option',
        tags: true
    });

    // Register a listener on the change event.

    $(".select2tag").change(function()
    {
        $(this).find("option").removeAttr("data-select2-tag");
    });
});
select {
    width: 90vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="select2tag">
  <option></option>
  <option value="AR">Argentina</option>
  <option value="BR">Brazil</option>
  <option value="CL">Chile</option>
  <option value="CO">Colombia</option>
  <option value="UY">Uruguay</option>
</select>

В любом случае, вы должны заметить, что эти новые созданные tags будут доступны только на стороне клиента (безобновление браузера).Если вы хотите сохранить эти новые tags на серверной стороне для последующего доступа, вам понадобится более эффективный подход, например:

(1) Создайте новый tag при создании.

(2) Подтвердите имя тега (вы не хотите сохранять все, что может написать пользователь).

(3) Если тег верен, отправьте его на сервер и сохраните в некоторой структуре (возможно, в базе данных).

(4) Перезагрузите select с новым набором данных.

Но для этого потребуется гораздо больше кода и знание деталей вашей среды, поэтому он выходит за рамки этого ответа.

0 голосов
/ 11 января 2019

Может быть, вы забыли установить атрибут multiple для элемента select? 

$(".select2Tags").each(function(index, element) {
  $(this).select2({
    tags: true,
    width: "100%" // just for stack-snippet to show properly
  });
});
<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>

<body>
  <select class="select2Tags" multiple="multiple">
    <option selected="selected">orange</option>
    <option>white</option>
    <option selected="selected">purple</option>
  </select>
</body>

</html>
0 голосов
/ 04 января 2019

Работает как положено:

HTML 

<select id="example" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>
<button id="btnTest" />

</button>

JS 

$('#example').select2({
    placeholder: 'Select a month'
});

$('#btnTest').on('click', function() {
    $('#example').select2({
         multiple: true,
         tags:true;
    });
})

Работаетфрагмент

https://jsfiddle.net/b6p3oycd/

...