多个 select 字段（Jquery Select2 插件）

Question

我正在使用 Jquery Select2 插件创建多个 select 输入字段。类似于第 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>

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

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

我在网上搜索了可能的解决方案。但目前一无所获。

我是 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}]";

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">

多个 select 字段（Jquery Select2 插件）

Multiple select field (Jquery Select2 plugin)

html

javascript

jquery

jquery-select2