多重選擇字段（jQuery的選擇二插件）

我使用jQuery選擇二插件來創建一個多選擇輸入字段。類似於所示的例子https://select2.github.io/examples.html頁面上，我創造了我的代碼：多重選擇字段（jQuery的選擇二插件）

$(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的新手。所以所有的幫助表示讚賞。

來源

2016-07-25 utkarsh2k2

根據裁判現場給出的文檔：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：上述代碼未經測試。但是，邏輯上似乎是正確的

來源

2016-07-25 11:21:53

我更喜歡將數據發送到客戶端爲JSON類型。如果我neded，得到實施例

數據= 「[{ID：」「文本：」「}，{ID：」「，文本}]」;

如果您發送類似上面你可以選擇其中多個，當選擇任意一個它不會被再次顯示的數據。

$（ '＃ID'）選擇2（ '數據'，數據）。

併爲您的HTML頁面，您可以只創建一個文本框，對於足夠的選擇2

來源

2016-07-25 11:51:24

多重選擇字段（jQuery的選擇二插件）

回答

相關問題