Получить выбранное значение в раскрывающемся списке с JavaScript

В этой записи я покажу вам как можно получить значение выбранного поля в select с помощью JavaScript или jQuery на своем примере.

HTML структура

Допустим у вас есть следующая HTML структура:

<select id="select-id">
  <option value="1">Тест 1</option>
  <option value="2" selected="selected">Тест 2</option>
  <option value="3">Тест 3</option>
</select>

Как видно из этого примера, option со значением «2» является выбранным элементом.

Вариант с JavaScript

Если вам нужно получить значение value, то делайте так:

var e = document.getElementById("select-id");
var value = e.options[e.selectedIndex].value;

В данном случае, значение value будет «2».

Если вам нужно получить значение текста выбранной опции, тогда делайте так:

var e = document.getElementById("select-id");
var text = e.options[e.selectedIndex].text;

И тогда вы получите «Тест 2», хранящийся внутри text.

Вариант с jQuery

В jQuery я буду делать точно тоже самое, что я писал в JavaScript, только используя нативный синтаксис этой библиотеки.

Используя тот же пример, я могу получить значение value следующим образом:

$("#select-id :selected").attr('value');

Если вас интересует текст, то это делается так:

$("#select-id :selected").text();