如何替換Select2選擇框中的選項

Question

我正在嘗試動態清除Select2選項列表，並使用新數據重新加載它。 我讀到的所有內容都告訴我，我可以設置數據，就像我正在做的那樣，但它只會附加數據，而不會清除它。

 $("#optioner").select2(); $("#doit").click(function() { $("#optioner").select2({ data: [{ id: "real1", text: "Real 1" }, { id: "real2", text: "Real 2" }] }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> <h1>Demo</h1> <select id="optioner" class="select2"> <option value="fake1">Fake 1</option> <option value="fake2">Fake 2</option> </select> <input id="doit" type="button" value="Real It Up"> 

我把它搞砸了。

Answer 1

在使用data選項添加選項之前，Select2沒有提供完全清除選項的方法，因為它已經可以使用jQuery .empty()函數完成。

$("#optioner").empty()
    .select2({ data: /* ... */ });

來自問題＃3877 ：

這是data選項的預期行為。 當使用data初始化Select2時，它會將數據對象數組轉換為可以使用的<option>元素。

因此，當您重新初始化它時，它會創建第二組<option>元素。

如果沒有，我如何重新填充Select2的選項/數據列表？

您可以通過在原始選擇上調用.empty（）來清除現有選項。

 $("select").empty(); 

請注意，這將重置任何現有選擇

 $("#optioner").select2(); $("#doit").click(function() { var $elem = $("#optioner"); $elem.empty() .select2({ data: [{ id: "real1", text: "Real 1" }, { id: "real2", text: "Real 2" }] }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> <h1>Demo</h1> <select id="optioner" class="select2"> <option value="fake1">Fake 1</option> <option value="fake2">Fake 2</option> </select> <input id="doit" type="button" value="Real It Up">