Question

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

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

其他选项是隐藏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

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

Dog

$('#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"   }
          ]    
});

Answer 2

<ul>
      <li>This is a test</li>
      <li>This is <span>another</span> text</li>
</ul>

$('#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"   }
          ]    
});

Answer 3

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

multiple: false,

Answer 4

只需在查询中添加以下代码，它就能满足您的需求

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

4 个答案: