在Select2元素中允許標簽
[英]Allow tags in Select2 elements
問題描述
我嘗試在具有特定類的select2元素上啟用標簽
$(".select2Tags").each(function(index, element) {
$(this).select2({
tags: true
});
});
但是允許新標簽無效。 我該如何工作？
3 個解決方案
解決方案1
1 2019-01-04 17:13:55
這按預期工作：
HTML
<select id="example" style="width: 300px">
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<button id="btnTest" />
</button>
JS
$('#example').select2({
placeholder: 'Select a month'
});
$('#btnTest').on('click', function() {
$('#example').select2({
multiple: true,
tags:true;
});
})
工作片段
解決方案2
0 2019-01-11 11:36:20
也許您忘記為select元素設置multiple屬性？
$(".select2Tags").each(function(index, element) { $(this).select2({ tags: true, width: "100%" // just for stack-snippet to show properly }); });
<!DOCTYPE html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> </head> <body> <select class="select2Tags" multiple="multiple"> <option selected="selected">orange</option> <option>white</option> <option selected="selected">purple</option> </select> </body> </html>
解決方案3
-1 2019-01-04 22:33:35
從select2插件的文檔中，可以看到：
除了預填充的選項菜單外，Select2還可以根據用戶在搜索框中輸入的文本動態創建新選項。 此功能稱為“標記”。 要啟用標記，請將標記選項設置為true。
和
請注意，啟用標記后，用戶可以從預先存在的選項中進行選擇，也可以通過選擇第一個選項來創建新選項，這是用戶到目前為止在搜索框中輸入的內容。
首先，您可以查看下一個有關如何使用此功能的基本示例。 如果select2啟用了tags選項，它將使您可以使用搜索框創建新的臨時標簽。 當您創建一個新標簽時，然后選擇一個新選項，先前創建的標簽將消失，因為它們不會永久地添加為新標簽。
基本示例：
$(document).ready(function() { // Initialize first select without using tags. $(".select2").select2( { placeholder: 'Select an option' }); // Initialize second select with tags enabled. $(".select2tag").select2( { placeholder: 'Select an option', tags: true }); // Initialize third select with tags and multiple options enabled. $(".select2tagMultiple").select2( { tags: true, multiple: true }); });
select { width: 90vw; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <h3>Select without tags:</h3> <p>You are only able to select one of the available options</p> <select class="select2"> <option></option> <option value="FR">France</option> <option value="DE">Germany</option> <option value="IT">Italy</option> <option value="ES">Spain</option> <option value="BE">Belgium</option> </select> <br> <h3>Select with tags enabled</h3> <p>You can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far</p> <select class="select2tag"> <option></option> <option value="AR">Argentina</option> <option value="BR">Brazil</option> <option value="CL">Chile</option> <option value="CO">Colombia</option> <option value="UY">Uruguay</option> </select> <br> <h3>Select with tags and the multiple option enabled</h3> <p>You can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far. This also enables the possibility to create multiple tags.</p> <select class="select2tagMultiple"> <option value="D">Dog</option> <option value="C">Cat</option> <option value="B">Bird</option> <option value="H">Horse</option> <option value="F">Frog</option> </select>
但是，我可以猜測，前面的示例都無法滿足您的問題。 對於您所做的修改不當，我假設您想要的是1）動態啟用/禁用tags選項，或者2）啟用了tags選項的非多個選擇，該tags可以添加多個新tag 。
1）動態啟用/禁用標簽的方法。
如果您需要動態啟用/禁用select上的標簽選項，則只需重新初始化插件即可，如下面的代碼片段所示：
$(document).ready(function() { // Initialize an standard select2. $(".select2").select2( { placeholder: 'Select an option' }); // Register a listener on the change event of checkbox for // dynamically enable/disable the tags option. $("#cbTags").change(function() { var cfg = { placeholder: 'Select an option' }; if ($(this).is(":checked")) cfg.tags = true; $(".select2tag").select2(cfg); }); });
select { width: 90vw; } .custom { margin-top: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select class="select2 select2tag"> <option></option> <option value="AR">Argentina</option> <option value="BR">Brazil</option> <option value="CL">Chile</option> <option value="CO">Colombia</option> <option value="UY">Uruguay</option> </select> <div class="custom"> <label><b>Enable Tags</b></label> <input type="checkbox" id="cbTags"> </div>
2）啟用多個標簽創建的方法。
將偵聽器綁定到change事件。 select2插件在使用標簽功能創建的選項中添加了一個名為data-select2-tag的屬性。 當您更改為其他可用選項（即臨時選項）時，這些選項將被刪除。 因此，在每次change事件中，我們都將刪除那些屬性以欺騙插件並阻止其刪除。 您可以檢查以下代碼：
$(document).ready(function() { // Initialize the select with tags enabled. $(".select2tag").select2( { placeholder: 'Select an option', tags: true }); // Register a listener on the change event. $(".select2tag").change(function() { $(this).find("option").removeAttr("data-select2-tag"); }); });
select { width: 90vw; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <select class="select2tag"> <option></option> <option value="AR">Argentina</option> <option value="BR">Brazil</option> <option value="CL">Chile</option> <option value="CO">Colombia</option> <option value="UY">Uruguay</option> </select>
無論如何，您應該注意，這些新創建的tags將僅在客戶端可用（不刷新瀏覽器）。 如果要將這些新tags保存到服務器端以供將來訪問，則需要一種更好的方法，例如：
（1）在創建時捕獲一個新tag 。
（2）驗證標簽名稱（您不想存儲所有用戶可以寫的內容）。
（3）如果標簽有效，則發送到服務器並存儲在某種結構（可能是數據庫）上。
（4）用新的數據集重新加載select 。
但這將需要更多代碼，並且需要了解您的環境的詳細信息，因此這不在此響應的范圍之內。
Select2 AJAX標簽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.