We can get value and text value of the option selected in the Dropdown using jQuery val() and text() methods.
For getting the value of the selected option from Dropdown use val() method and for text string available for the selected option will be retrieved using text() method as shown below:
<select id="myDropDown" class="form-control">
<option value="0">Select Value 0</option>
<option value="8">Option value 8</option>
<option value="5">Option value 5</option>
<option value="4">Option value 4</option>
</select>
Binding Change Event on Select Dropdown
Using the id selector, bind a change event and get value and text string
<script>
$(function () {
$("#myDropDown").change(function () {
// Fetching Value
console.log($(this).val());
// Fetching Text
console.log($(this).find('option:selected').text());
alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
});
});
</script>
Getting on Button Click
We can also get value and text using the ID selector of Dropdown control
<script>
$(function () {
$("button").click(function () {
// Fetching Value
console.log($("#myDropDown").val());
// Fetching Text
console.log($('#myDropDown option:selected').text());
alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
});
});
</script>
