Чтобы инициализировать библиотеку Select2 в раскрывающемся списке, вы можете выполнить следующие действия, используя различные методы. Здесь я приведу примеры кода для трех популярных методов: использование простого JavaScript, jQuery и Vue.js.

Метод 1: обычный JavaScript

<!-- HTML -->
<select id="myDropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
<!-- JavaScript -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var selectElement = document.getElementById("myDropdown");
    var select2 = new Select2(selectElement);
  });
</script>

Метод 2: jQuery

<!-- HTML -->
<select id="myDropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
<!-- jQuery -->
<script>
  $(document).ready(function() {
    $("#myDropdown").select2();
  });
</script>

Метод 3: Vue.js

<!-- HTML -->
<div id="app">
  <select2 v-model="selectedOption" :options="dropdownOptions"></select2>
</div>
<!-- Vue.js -->
<script>
  Vue.component("select2", {
    props: ["options", "value"],
    template: `
      <select>
        <slot></slot>
      </select>
    `,
    mounted() {
      $(this.$el)
        .select2({ data: this.options })
        .val(this.value)
        .trigger("change")
        .on("change", (e) => {
          this.$emit("input", e.target.value);
        });
    },
    destroyed() {
      $(this.$el).off().select2("destroy");
    },
  });
  new Vue({
    el: "#app",
    data: {
      selectedOption: null,
      dropdownOptions: [
        { id: "option1", text: "Option 1" },
        { id: "option2", text: "Option 2" },
        { id: "option3", text: "Option 3" },
      ],
    },
  });
</script>

Эти методы демонстрируют, как инициализировать Select2 в раскрывающемся списке с помощью простого JavaScript, jQuery и Vue.js. Выберите метод, соответствующий требованиям вашего проекта.