In this article I will explain with an example, how to call JavaScript function of SelectedIndexChanged on HTML DropDownList using JavaScript and jQuery.
Call JavaScript function on SelectedIndexChanged of HTML DropDownList 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>
Call JavaScript function on SelectedIndexChanged of HTML DropDownList 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
![Call JavaScript function on SelectedIndexChanged of HTML DropDownList 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
