多选字段（Jquery Select2 插件）答案

【问题标题】：Multiple select field (Jquery Select2 plugin)多选字段（Jquery Select2 插件）
【发布时间】：2016-07-25 10:47:28
【问题描述】：

我正在使用 Jquery Select2 插件来创建一个多选输入字段。与页面https://select2.github.io/examples.html 中的示例类似，我创建了我的代码：

    $(document).ready(function() {
        $("#category_tags___name___tagname").select2(
                {placeholder: "Select tags"},
        );

现在在服务器端，我使用 PHP 框架（Symfony2）来创建 HTML 表单，大致如下：

<select id="category_tags___name___tagname" name="category[tags][__name__][tagname][]" required="required" style="width:300px" multiple="" tabindex="-1" class="select2-hidden-accessible">
            <option value="1">tag1</option>
            <option value="2">tag2</option>
            <option value="3" selected="selected">tag3</option>
</select>

这很好用，单击该字段后，可用选项会出现在下拉列表中。但是问题是，一旦我选择了任何选项，它就会作为标签添加到字段中，但是它仍然出现在下拉列表中并且没有被禁用，即。如果我在下拉列表中再次单击该选项，它将被取消选择。

我想要的功能是，一旦选择了一个选项，它就必须作为标签出现在字段中，但不应再出现在下拉列表中。

我已经在网上搜索了可能的解决方案。但是目前什么都没找到。

我是 Jquery 的新手。因此，感谢所有帮助。

【问题讨论】：

标签： javascript jquery html jquery-select2

【解决方案1】：

根据参考网站中给出的文档：https://select2.github.io/examples.html，实现您所追求的一种方法是使用select2:select 和select2:unselect 事件来触发您的自定义行为：

试试下面的方法：

首先在您的 html 中为每个选项值指定一个特定的ID，例如：

   <option value="1" id='specific-1'>tag1</option>
   <option id='specific-2' value="2">tag2</option>
   <option value="3" id='specific-3' selected="selected">tag3</option>

在你的 js 中：

//when select is triggered
$("#category_tags___name___tagname").on("select2:select", function (e) {
   var myID = '#'+e.data.id //getting specific id from event
   $(myID).css('display','none') //hide it using css 
});

//when unselect is triggered
$("#category_tags___name___tagname").on("select2:unselect", function (e) {
   var myID = '#'+e.data.id //getting specific id from event
   $(myID).css('display','block') //show it using css 
});

P.S：以上代码未经测试。但是，逻辑似乎是正确的

【讨论】：

【解决方案2】：

我更喜欢将数据以 json 格式发送到客户端。如果需要我举个例子

data = "[{id:"",text:""},{id:"",text}]";

if you send data like above you can select them multiple and when chose any one it wont be shown again.

$('#id').select2('data', data);

对于您的 html 页面，您只需创建一个足以用于 select2 的文本框

<input type="text" id="id">

【讨论】：