Question

我正在使用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的新手。所以所有的帮助都表示赞赏。

Answer 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 ：以上代码未经测试。但是，逻辑似乎是正确的

Answer 2

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

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

如果您发送上述数据，您可以选择多个数据，当选择任何一个时，它将不再显示。

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

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

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

多选字段（Jquery Select2插件）

2 个答案: