Выпадающий список Select2 не общается с источником - PullRequest
Новая
       9

Выпадающий список Select2 не общается с источником

0 голосов
/ 09 сентября 2018

Я пытаюсь реализовать Select2 в моем скрипте. Но когда я запускаю свой скрипт, я все равно получаю нормальный выпадающий список. Кто-то знает, что не так?

Я поместил часть JavaScript в <head> моего сайта: 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script type="text/javascript">
    // Setting default configuration here or you can set through configuration object as seen below
$.fn.select2.defaults = $.extend($.fn.select2.defaults, {
    allowClear: true, // Adds X image to clear select
    closeOnSelect: true, // Only applies to multiple selects. Closes the select upon selection.
    placeholder: 'Select...',
    minimumResultsForSearch: 15 // Removes search when there are 15 or fewer options
});

$(document).ready(

function () {

    // Single select example if using params obj or configuration seen above
    var configParamsObj = {
        placeholder: 'Select an option...', // Place holder text to place in the select
        minimumResultsForSearch: 3 // Overrides default of 15 set above
    };
    $("#singleSelectExample").select2(configParamsObj);
});
</script>
</head>

В <body> у меня есть выпадающий список: 

<select id="singleSelectExample">
    <option></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

Когда я запускаю скрипт, я все равно получаю нормальное выпадающее меню вместо выпадающего списка с поиском. Кто-то знает, что не так?

1 Ответ

0 голосов
/ 09 сентября 2018

На основании предоставленного вами кода у вас есть пара ошибок

  1. Вы загружаете CSS в тег скрипта (вы должны загрузить в тег ссылки) от <script type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.css"</script> изменить на <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />

  2. Вы неправильно закрыли тег script в select2.js увидеть: <script type="text/javascript" src="https://select2.github.io/select2/select2-3.5.1/select2.js"</script>

Также не загружайте css и js из github. Иногда я замечал, что github не отправляет правильный заголовок о типе содержимого скриптов (например, application / javascript) Лучшая загрузка с CDN, как CDNJS

Я сделал эти изменения и select2 правильно отрисовывает поэтому мои новые теги, которые вы загружаете в голову, выглядят так: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
...