Как связать инпут с опцией селекта?
Есть несколько оберток, внутри которых селект с опциями (одна из опций - 'Телефон') и рядом инпут. Хочу чтобы при выборе опции 'Телефон' можно было вводить только цифры. В моем коде первой опцией как раз стоит 'Телефон', но оно не работает корректно при первом запуске страницы, приходится перещелкивать на другую опцию и потом назад на 'Телефон' чтобы заработало, при этом после таких махинаций вообще всегда будет возможность вводить только цифры при любой выбранной опции.
Весь JS украл у нейросети, сам как сделать не знаю. Памагити.
https://codepen.io/Vlad096/pen/gOygpLo
Дополнительно:
Ответы:
В реальной жизни номер телефона состоит не только из цифр, там есть ещё и скобки, дефисы...
const allSelects = document.querySelectorAll('.contactType'); function toggleInputType(selectElement) { const inputElement = selectElement.parentElement.querySelector('.contactDescr'); inputElement.type = selectElement.value === 'tel' ? 'tel' : 'text'; } for (const select of allSelects) { select.addEventListener('change', () => { toggleInputType(select) }); } |
const allSelects = document.querySelectorAll('.contactType'); function toggleInputType(selectElement) { const inputElement = selectElement.parentElement.querySelector('.contactDescr'); inputElement.type = selectElement.value === 'tel' ? 'tel' : 'text'; } for (const select of allSelects) { select.addEventListener('change', () => { toggleInputType(select) }); }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для связывания инпута с опцией селекта вам нужно использовать JavaScript. Ниже приведен пример кода на чистом JavaScript, который поможет вам решить эту задачу:
```html
Option 1
Option 2
Option 3
document.getElementById('input').addEventListener('input', function() {
var inputValue = this.value;
var select = document.getElementById('select');
for (var i = 0; i < select.options.length; i++) {
var optionValue = select.options[i].value;
if (optionValue === inputValue) {
select.selectedIndex = i;
break;
}
}
});
```
В этом примере мы добавляем обработчик события `input` к инпуту, который будет вызываться каждый раз, когда пользователь вводит что-то в поле инпута. Затем мы получаем значение введенное в инпут и сравниваем его со значениями опций в селекте. Если значение совпадает, мы устанавливаем соответствующую опцию в селекте как выбранную.
Таким образом, при вводе определенного значения в инпут, соответствующая опция в селекте будет автоматически выбрана. Надеюсь, это поможет вам решить вашу проблему!