Select2 не отображается правильно - PullRequest
Новая
       30

Select2 не отображается правильно

0 голосов
/ 30 сентября 2019

У меня проблема с отображением 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>

Но результат выглядит как на скриншоте ниже: enter image description here Кто-нибудь знает, что с этим не так? Вы можете скопировать и вставить весь код, и он будет работать как есть. Пожалуйста, помогите мне. Это сводит меня с ума ...

РЕДАКТИРОВАТЬ : Есть два идентификатора, но если я удаляю первый, это выглядит как на картинке ниже:

enter image description here

...