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

编程问答 2022-08-15

问题描述

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

这是codepen：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/[email protected]/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/[email protected]/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>

解决方法

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

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

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

工作代码段： 

$(document).ready(function() {
  $(".js-example-basic-single").select2({
    dropdownParent: $("#placeholder")
  });
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

jqueryjquery-select2uikituikit