In this article I will explain how to get selected Text and Value of HTML Select DropDownList in OnChange event using jQuery.
Get selected Text and Value of DropDownList in OnChange event using jQuery
The following HTML Markup consists of an HTML Select DropDownList. The HTML Select DropDownList has been assigned a jQuery OnChange event handler.
When an item is selected in the HTML Select DropDownList, the jQuery OnChange event handler is executed within which the Text and Value of the selected item is fetched and displayed in JavaScript alert message box.
Select Fruit:
<select id="ddlFruits">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Orange</option>
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlFruits").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
});
});
</script>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
DropDownList_OnChange.zip