如何在 uikit uk-dropdown 中使用 select2？答案

【问题标题】：How can I use select2 inside uikit uk-dropdown?如何在 uikit uk-dropdown 中使用 select2？
【发布时间】：2020-08-20 11:23:49
【问题描述】：

当我在 uk-dropdown Uikit 中使用 select2 下拉菜单并选择了一个选项时，它会自动关闭模式。

这里是代码笔：Codepen

// In your JavaScript code (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

<html>
  <head>

  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

  </head>

  <body>
    <button class="uk-button uk-button-default" type="button">Click</button>
    <div uk-dropdown="mode:click">
        sfsdf
        <select class="js-example-basic-single" name="state">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>

        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>

  </body>
</html>

【问题讨论】：

标签： jquery uikit jquery-select2

【解决方案1】：

出现此问题是因为 uikit 倾向于从 uikit 之外的其他元素中窃取焦点。由于默认情况下，Select2 将下拉菜单附加到元素，因此它被认为是“在 uikit 之外”。

为避免此问题，您可以使用 dropdownParent 设置将下拉菜单附加到 uikit 本身：

$(document).ready(function() {
    $(".js-example-basic-single").select2({
        dropdownParent: $("#placeholder")
    });
});

工作代码sn-p：

$(document).ready(function() {
  $(".js-example-basic-single").select2({
    dropdownParent: $("#placeholder")
  });
});

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://getuikit.com/assets/uikit/dist/css/uikit.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.js"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<button class="uk-button uk-button-default" type="button">Click</button>
<div id="placeholder" uk-dropdown="mode:click">
    <select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
     It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   
</div>

【讨论】：