更改时从 select2 多选中删除选定的选项。答案

【问题标题】：Remove selected option from select2 multiselect on change.更改时从 select2 多选中删除选定的选项。
【发布时间】：2017-01-07 19:14:08
【问题描述】：

我有以下代码。目的是设置一个带有文本框的 select2 框作为搜索框。所以我将它实现为 multiselect ，但我只想选择一个选项。

一种选择是限制使用maximumSelectionLength: 1。但在这种情况下，将显示我不想发生的限制消息。（即使我隐藏它也会占用一些空间）。

其他选项是隐藏 last-child 以外的所有内容，在这种情况下，提交表单时将向后端发送多个值。

那么有没有办法在多选中选择新值的时候去掉当前选中的值呢？

我使用的是 select2 版本 3.5.2

$('#placeSelect').select2({
    width: '100%',
    allowClear: true,
    multiple: true,
    placeholder: "Click here and start typing to search.",
    data: [
            { id: 1, text: "Honolulu"     },
            { id: 2, text: "Tokyo"    },
            { id: 3, text: "Delhi" },
            { id: 4, text: "Zurich"   }
          ]    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>

【问题讨论】：

只能实现多选一选：false;你有什么问题吗？

标签： javascript jquery jquery-select2 select2

【解决方案1】：

您只能保留最后选择的项目并删除所有其他项目。像这样：

$('#placeSelect').click(function () { 
   var t = $("#placeSelect").val().substr($("#placeSelect").val().length - 1);
   $("#placeSelect").val(t).trigger("change");
});

$('#placeSelect').select2({
    width: '100%',
    allowClear: true,
    multiple: true,
    placeholder: "Click here and start typing to search.",
    data: [
            { id: 1, text: "Honolulu"     },
            { id: 2, text: "Tokyo"    },
            { id: 3, text: "Delhi" },
            { id: 4, text: "Zurich"   }
          ]    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>

【讨论】：

【解决方案2】：

$('#placeSelect').select2({
    width: '100%',
    allowClear: true,
    multiple: false,
    placeholder: "Click here and start typing to search.",
    data: [
            { id: 1, text: "Honolulu"     },
            { id: 2, text: "Tokyo"    },
            { id: 3, text: "Delhi" },
            { id: 4, text: "Zurich"   }
          ]    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script>
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/>
<h3>Select a value</h3>
<input type="text" id="placeSelect"/>

【讨论】：

做不到，那是主要用途。在单选中，搜索框将出现而不是在文本框中搜索，我想直接在文本框中搜索而不是 select2 自定义搜索框。
看到这个帖子，也许它可以帮助stackoverflow.com/questions/20223044/…

【解决方案3】：

您正在使用多选项选择，我建议您执行以下操作：

multiple: false,

【讨论】：

做不到，那是主要用途。在单选中，将出现搜索框，而不是在文本框中搜索。

【解决方案4】：

只需在您的查询中添加以下代码，它就会根据您的需要工作

$('ul.select2-choices').on("click", function() {
    $("ul.select2-choices li .select2-search-choice-close").click();
  });

【讨论】：