Вы можете использовать jQuery-селектор :selected в сочетании с методом val(), чтобы найти значение выбранного параметра в поле <select> или раскрывающемся списке.
Давайте посмотрим следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(this).children("option:selected").val();
alert("Вы выбрали страну - " + selectedCountry);
});
});
</script>
</head>
<body>
<form>
<label>Выберите страну:</label>
<select class="country">
<option value="usa">Соединенные Штаты</option>
<option value="india">Индия</option>
<option value="uk">Великобритания</option>
</select>
</form>
</body>
</html>Если значение для параметра не определено специально, вместо этого в качестве значения будет использоваться текстовое содержимое элемента <option>, как показано в следующем примере:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Text</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(this).children("option:selected").val();
alert("Вы выбрали страну - " + selectedCountry);
});
});
</script>
</head>
<body>
<form>
<label>Выберите страну:</label>
<select class="country">
<option value="usa">Соединенные Штаты</option>
<option value="india">Индия</option>
<option value="uk">Великобритания</option>
</select>
</form>
</body>
</html>В качестве альтернативы вы можете использовать jQuery-метод text() для получения текстового содержимого элемента.
Получить выбранные параметры из окна множественного выбора
Точно так же вы можете получить выбранные значения из поля множественного выбора (multiple select).
Поле множественного выбора позволяет пользователю выбрать несколько вариантов. Удерживайте нажатой клавишу Control в Windows или командную клавишу на Mac, чтобы выбрать несколько параметров. Вы можете включить выбор нескольких разделов в поле выбора, добавив атрибут multiple к тегу <select>. Вот пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Multiple Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
var countries = [];
$.each($(".country option:selected"), function(){
countries.push($(this).val());
});
alert("Вы выбрали страну - " + countries.join(", "));
});
});
</script>
</head>
<body>
<form>
<label>Выберите страны:</label>
<select class="country" multiple="multiple" size="5">
<option>Соединенные Штаты</option>
<option>Индия</option>
<option>Великобритания</option>
<option>Бразилия</option>
<option>Германия</option>
</select>
<button type="button">Получить значения</button>
</form>
</body>
</html>
