Блог

Главная - Вопросы по программированию - библиотека с возможностью выбора с возможностью поиска Select2 не может работать

библиотека с возможностью выбора с возможностью поиска Select2 не может работать

#javascript #html #jquery

Вопрос:

Я создал веб-приложение, мне нужно создать окно выбора с возможностью поиска.

Я использовал библиотеку Select2: https://select2.org.

Но в моем случае библиотека не могла работать, не отображался ввод с возможностью поиска, также не была задана точка останова для выполнения Select2.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<select id='course_for_select' name="course_for_select" style="width:200px;" class="operator">
  <option value="">--Select--</option>
  {% for course in query_results %}
    <option value=" {{ course.title }}">{{ course.title }}</option>
  {% endfor %}
</select>

<script>
  $(document).ready(function() {
    //change selectboxes to selectize mode to be searchable
    $("select").select2();
  });
</script>

Я получил ошибку: Неперехваченная ошибка типа: $(…).select2 не является функцией

Ответ №1:

Если вы проверите консоль, вы увидите ошибку

$(…).select2 не является функцией

Это происходит потому, что, хотя вы добавляете jquery.min.js и select2.min.js на страницу после этого вы добавляете еще один экземпляр jQuery, который перезаписывает предыдущий и теряет ссылку на Select2.

Чтобы устранить проблему, просто удалите вторую версию jQuery

 $(document).ready(function() {
  //change selectboxes to selectize mode to be searchable
  $("select").select2();
}); 
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<select id='course_for_select' name="course_for_select" style="width:200px;" class="operator">
  <option value="">--Select--</option>
  <option value=" {{ course.title }}">{{ course.title }}</option>
</select>

Комментарии:

1. Я проверил консоль, нет таких ошибок, о которых вы упоминали. точка останова в этой строке: $(«выбрать»). select2(); также попадает после удаления второй версии jQuery, как вы предложили, я все еще не мог получить поле ввода, отображаемое над полем выбора.

2. Ошибки больше нет, потому что вы отредактировали код в вопросе, чтобы удалить второй экземпляр jQuery. Из-за этого код в вашем вопросе теперь работает абсолютно нормально. Без воссоздания проблемы или без сообщения об ошибке для отладки на самом деле мы не можем предложить никакой помощи.

3. Я переместил вторую, как вы предложили, и обнаружил, что в моем поле выбора по-прежнему нет доступных для поиска входных данных. Получено сообщение об ошибке: Неперехваченная ошибка типа: $(…).select2 не является функцией. У меня есть еще один сценарий ниже этого, может быть, именно по этой причине в моем поле выбора невозможно найти ввод с возможностью поиска?

4. В коде, который вы изначально опубликовали, действительно была ошибка в консоли. Я воссоздал его в этой скрипке: jsfiddle.net/RoryMcCrossan/sL3yw9jm . Проверьте это и убедитесь, что вы ищете в нужном месте, чтобы найти ошибки. I have a another script below that one, maybe that's the reason no searchable input could be find in my select box? . Возможно, хотя этот скрипт выполняется в вашем вопросе без каких-либо ошибок. Однако мы не видим, чтобы это работало, так как HTML неполон.

5. Исправлено путем изменения на <script src=» cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js » отложить>></скрипт>

Метки: