custom-select/index.html


<!doctype html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom select</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }

    .container {
      max-width: 250px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
  <!-- Подключаем CSS файл CustomSelect -->
  <link rel="stylesheet" href="custom-select.css">
  <!-- Подключаем JavaScript файл CustomSelect -->
  <script defer src="custom-select.js"></script>
  <!-- JS-код в котором инициализируем экземпляр CustomSelect для #select-1 -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      new CustomSelect('#select-1', {
        name: 'car',
        targetValue: 'ford',
        options: [
          ['volkswagen', 'Volkswagen'],
          ['ford', 'Ford'],
          ['toyota', 'Toyota'],
          ['nissan', 'Nissan']
        ],
        onSelected(select, option) {
          // выбранное значение
          console.log(`Выбранное значение: ${select.value}`);
          // индекс выбранной опции
          console.log(`Индекс выбранной опции: ${select.selectedIndex}`);
          // выбранный текст опции
          const text = option ? option.textContent : '';
          console.log(`Выбранный текст опции: ${text}`);
        },
      });
      document.querySelector('.select').addEventListener('select.change', (e) => {
        const btn = e.target.querySelector('.select__toggle');
        // выбранное значение
        console.log(`Выбранное значение: ${btn.value}`);
         // индекс выбранной опции
        console.log(`Индекс выбранной опции: ${btn.dataset.index}`);
        // выбранный текст опции
        const selected = e.target.querySelector('.select__option_selected');
        const text = selected ? selected.textContent : '';
        console.log(`Выбранный текст опции: ${text}`);
      });
    })
  </script>
</head>

<body>

  <div class="container">

    <!-- Кастомный селект -->
    <div id="select-1"></div>

  </div>
</body>

</html>