Как сделать select phone country code?

Ссылка скопирована
CSS HTML JavaScript
16 января 2026 1 ответ

Пытаюсь реализовать select phone country code, нашел готовое решение на CodePen:
https://codepen.io/piyushpd139/pen/JjNjzBb

но это не совсем то, что нужно. Необходимо, чтобы сверху был список стран(код) , где при нажатии на страну, можно было вводить номер телефона в форме.

Как здесь

Как сделать select phone country code?

Дополнительно:

Ответы:

Совсем не то?

https://codepen.io/maksam07/pen/ExMrwrY

  • Странно как-то дублировать списки

    Как сделать select phone country code?

  • Сергей delphinpro, я не углублялся в работу библиотеки, возможно можно отключить список во втором поле
  • Почти то, но только во второй форме не должно быть выбора страны. Первая форма - это выбор страны, во второй, подставляется код с первой формы и можно вводить телефон
  • Andress84, обновил код
  • maksam07, Спасибо большое, только можно ли сделать, чтобы в input отображался код страны и не было флага
  • Andress84, в другом ответе человек подказал на счет showFlag, а на счет другого нужно смотреть документацию или кастомить свое решение.

Изучите документацию к плагину https://github.com/jackocnr/intl-tel-input

Вам нужны

  • опция allowDropdown, чтобы отключить штатный выпадающий список
  • метод setCountry(), чтобы установить страну, которую вы выберете в отдельном выпадающем списке
  • возможно, вы еще захотите отключить отображение флагов опцией showFlag
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Стас DB Ответ

Для того чтобы создать выпадающий список с кодами стран для телефонных номеров, вам потребуется использовать HTML, CSS и JavaScript.

Прежде всего, создайте элемент select в вашем HTML коде:

 
    USA (+1)
    UK (+44)
    France (+33)
    <!-- Добавьте другие коды стран по необходимости -->

USA (+1) UK (+44) France (+33) <!-- Добавьте другие коды стран по необходимости -->

Теперь добавьте стили для вашего select элемента, чтобы он выглядел как выпадающий список:

#countryCode {
    appearance: none;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: url('arrow.png') no-repeat right center;
}

#countryCode { appearance: none; padding: 5px; border: 1px solid #ccc; border-radius: 5px; background: url('arrow.png') no-repeat right center; }

Замените 'arrow.png' на изображение стрелки для вашего выпадающего списка.

Наконец, добавьте JavaScript код, чтобы обработать выбор пользователя и получить выбранный код страны:

document.getElementById('countryCode').addEventListener('change', function() {
    var selectedCode = this.value;
    console.log('Selected country code: ' + selectedCode);
});

document.getElementById('countryCode').addEventListener('change', function() { var selectedCode = this.value; console.log('Selected country code: ' + selectedCode); });

Теперь при выборе кода страны из выпадающего списка, вы увидите выбранный код в консоли.

Это простой способ создать выпадающий список с кодами стран для телефонных номеров. Вы можете настроить его стили и функциональность по своему усмотрению.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ