jquery - Select2 显示不正确

问题描述

我在正确显示 select2 时遇到问题。我有一个来自 CDN 的所有来源的简单代码，如下所示：

<!DOCTYPE html>
<html lang="sk">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script   src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
    <style>
    </style>
</head>
<body>
<h1>Drom/index.php</h1>

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <form action="drom/index.php" class="form-group">
                <select name="type[]" id="x" class="form-control" id="frm-timeline-typeFilter-type" multiple="" data-autosubmit="1" data-select2-id="frm-timeline-typeFilter-type" tabindex="-1" aria-hidden="true">
                    <option value="contract" data-select2-id="3">Centrálny register zmlúv</option>
                    <option value="kataster" data-select2-id="4">Kataster</option>
                    <option value="kore" data-select2-id="5">Konkurzy a reštrukturalizácie</option>
                    <option value="likv" data-select2-id="6">Likvidácie a zrušenia</option>
                    <option value="debt" data-select2-id="7">Podlžnosti</option>
                </select>
            </form>
        </div>
    </div>
</div>  

<script>
    (function ($)
    {
        $('#x').select2();
    }(jQuery));
</script>
</body>
</html>

但结果看起来像下面的屏幕截图：有人知道这有什么问题吗？您可以复制并粘贴所有代码，它将按原样工作。请帮我。它让我疯狂...

编辑：有两个 ide，但如果我删除第一个，它看起来像下图：

标签： jquerycssjquery-select2

jquery - Select2 显示不正确

问题描述

解决方案

推荐阅读