Как получить выбранное значение <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;
Добавить комментарий