EN
jQuery - get selected option text and value from dropdown html select
14 points
In this article, we would like to show you how to get selected option text and value from dropdown HTML select using jQuery.
In jQuery, we can get the selected option from dropdown using option:selected.
xxxxxxxxxx1
// get value2
var value = $('#my-dropdown-id option:selected').val();3
// get text4
var text = $('#my-dropdown-id option:selected').text();Interactive code example
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>5
</head>6
<body>7
<select id="my-dropdown-id">8
<option value="1">Blue</option>9
<option value="2" selected>Green</option>10
<option value="3">Red</option>11
<option value="4">Yellow</option>12
</select>13
<script>14
15
$(document).ready(function() {16
17
var value = $('#my-dropdown-id option:selected').val();18
console.log("value: " + value); // green19
20
var text = $('#my-dropdown-id option:selected').text();21
console.log("text : " + text); // Green22
});23
24
</script>25
</body>26
</html>In jQuery, we can get the selected option from dropdown using find.
xxxxxxxxxx1
// get value2
var value = $('#my-dropdown-id').find(":selected").val();3
// get text4
var text = $('#my-dropdown-id').find(":selected").text(); Interactive code example
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>5
</head>6
<body>7
<select id="my-dropdown-id">8
<option value="1">Blue</option>9
<option value="2" selected>Green</option>10
<option value="3">Red</option>11
<option value="4">Yellow</option>12
</select>13
<script>14
15
$(document).ready(function() {16
17
var value = $('#my-dropdown-id').find(":selected").val();18
console.log("value: " + value); // green19
20
var text = $('#my-dropdown-id').find(":selected").text();21
console.log("text : " + text); // Green22
});23
24
</script>25
</body>26
</html>