Как получить выбранное значение <option> у <select>
Можно с помощью псевдокласса :checked
Пример
document.querySelector('#donate-description :checked').value; // Получаем значение
document.querySelector('#donate-description :checked').text; // Или получаем текст между тегами option
Но, чтобы получаемые данные менялись после выбора, нужно написать функцию и назначить слушатель события. Например, по клику. Иначе будет всегда передаваться только первое значение.
HTML
<select id="donate-description" name="description">
<option value="Пожертвование на уставную деятельность">На уставную деятельность</option>
<option value="Пожертвование для Руслана">Для Руслана</option>
<option value="Пожертвование для Захара">Для Захара</option>
<option value="Пожертвование для Константина">Для Константина</option>
</select>
Javascript
function getPurpose() {
const checkedPurpose = document.querySelector('#donate-description :checked').value;
return checkedPurpose;
}
document.getElementById('donate-description').onclick = getPurpose(); // После клика получаем значение выбранной опции.
Теперь в нужном месте вставить функцию getPurpose(), она вернет выбранное значение.
Примечание.Чтобы работало, нужно Javascript код разместить после HTML.
Множественный выбор
querySelectorAll возвращает массив, поэтому нужно либо перебирать его элементы, либо указывать индекс.
document.querySelectorAll('#donate-description :checked')[0].value;
Категория:
Добавить комментарий