多重選擇字段（jQuery Select2插件）

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 
});

PS ：以上代碼未經測試。 但是，邏輯似乎是正確的

Answer 2

我更喜歡將數據作為json發送到客戶端。 如果我需要舉一個例子

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

如果您像上面那樣發送數據，則可以選擇多個，並且在選擇任何一個時都不會再次顯示。

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

而對於您的html頁面，您可以只創建一個足以供select2使用的文本框

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