在更改时从 select2 多选中删除所选选项。

Question

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

一个选项是限制使用 maximumSelectionLength: 1。但在这种情况下，将显示我不希望发生的限制消息。（即使我隐藏它，一些 space 也会被占用）。

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

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

我正在使用 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"/>

Answer 1

$('#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"/>

Answer 2

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

multiple: false,

Answer 3

只需在您的查询中添加以下代码，它就会按您的需要运行

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

Answer 4

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

$('#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"/>

在更改时从 select2 多选中删除所选选项。

Remove selected option from select2 multiselect on change.

javascript

jquery

jquery-select2

select2