在Select2元素中允许标签

时间：2018-12-16 16:47:41

标签： javascript jquery jquery-select2

我尝试在具有特定类的select2元素上启用标签

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

但是允许新标签无效。我该怎么做？

3 个答案:

答案 0 :(得分：1)

这按预期工作：

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/

答案 1 :(得分：0)

也许您忘记为选择元素设置multiple属性了？

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

答案 2 :(得分：-1)

从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）一个非多个并启用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。

但这将需要更多代码，并且需要了解您的环境的详细信息，因此这不在此响应范围之内。

相关问题
最新问题