In this article I will explain how to get selected Text and Value of HTML Select DropDownList in OnChange event using JavaScript and jQuery.
Get selected Text and Value of DropDownList in OnChange event using JavaScript
The following HTML Markup consists of an HTML Select DropDownList. The HTML Select DropDownList has been assigned a JavaScript OnChange event handler.
When an item is selected in the HTML Select DropDownList, the GetSelectedTextValue JavaScript function is executed to which the reference of the HTML Select DropDownList is passed as parameter.
Using this reference, the selected Text and Value is determined and is displayed using JavaScript alert message box.
Select Fruit:
<select id="ddlFruits" onchange="GetSelectedTextValue(this)">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Orange</option>
</select>
<script type="text/javascript">
function GetSelectedTextValue(ddlFruits) {
var selectedText = ddlFruits.options[ddlFruits.selectedIndex].innerHTML;
var selectedValue = ddlFruits.value;
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
}
</script>
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
![Get selected Text and Value of DropDownList in OnChange event using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
Download Code
