多选字段(Jquery Select2插件）

Multiple select field (Jquery Select2 plugin)

本文关键字：Select2 插件 Jquery 字段      更新时间：2023-09-26

我正在使用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的新手。所以我们非常感谢所有的帮助。

根据ref站点中给出的文档：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：以上代码未经测试。但是，逻辑似乎是正确的

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

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

如果你像上面那样发送数据，你可以选择多个，当选择任何一个时，它都不会再次显示。

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

对于你的html页面，你只需要创建一个足够选择2 的文本框

<input type="text" id="id">
相关文章：