javascript - 页面完全加载后 select2 不呈现

Question

我正在使用的 wordpress 插件遇到了这个问题。我尝试在本地 html 页面上使用它，它工作正常。现在，当我在使用 wordpress 的服务器上尝试时，我可以看到它正在初始化，但在几毫秒后它被原版选择菜单取代。我不知道是什么原因造成的。小伙伴们怎么看？

编辑：我还想补充一点，我看到 select2 的工作方式是，一旦文档准备好，它将自己的 select 元素注入到文档中。这似乎发生在我的页面中，但是在页面完成加载后元素就消失了。

第一个菜单是 select2 的样子。没关系。图片上的第二个菜单是它最终的外观 - 一个普通的选择元素。

https://i.imgur.com/W2ALH8T.png这就是脚本的样子。没什么复杂的，只需要先看看它是否正常运行。

此片段显示代码工作正常，但我似乎无法复制网站上发生的事情。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
  jQuery(document).ready(function($) {

    $('.country-switcher').select2();

  });
</script>
<span class="widgettitle">SHIP TO:</span>
<div class="wc-price-based-country wc-price-based-country-refresh-area refreshed" data-area="widget" data-id="39ddbdcf9476789f65bca6d5b7cda228" data-options="{&quot;instance&quot;:{&quot;other_countries_text&quot;:&quot;Other countries&quot;,&quot;title&quot;:&quot;SHIP TO:&quot;,&quot;remove_other_countries&quot;:&quot;1&quot;},&quot;id&quot;:&quot;wcpbc_country_selector&quot;}">
  <select class="wcpbc-country-switcher country-switcher">
    <option value="AX">Åland Islands</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option>
    <option value="AR">Argentina</option>
    <option value="AM">Armenia</option>
    <option value="AW">Aruba</option>
    <option value="AU" selected="selected">Australia</option>
  </select>
</div>

对此问题的任何帮助将不胜感激。谢谢大家！

标签： javascriptjquery-select2