Javascript onchange Event to get SelectedIndex SelectedValue SelectedText of HTML Select Option

The Drop Down Selection List is an element of HTML forms commonly known as Combo Box. Most of the times developers need to find or get the Selected Index value, Selected Value & Selected Text. In this post i will show you how one can write a cross-browser supported client side javascript to get Selected Index, Selected Text & Selected Value form HTML Drop Down Selection List. Hope it will help & save time for developers.

Desired Output:
Javascript_ Selectedindex_Selectedvalue_Selectedtext_HTML_SELECT_Option

HTML Markup for HTML Select Option:

<select name="HTMLSelect" onchange="getHTMLSelectOptionText();">
    <option value="Asp">Free articles/Code examples
    <option value="Sqlserver">Free Sql server articles/Code examples
    <option value="Javascript">Free Javascript articles/Code examples
    <option value="XML">Free XML articles/Code examples
    <option value="Gridview">Free Gridview articles/Code examples

Javascript Function Code:

<script type="text/javascript">
    function getHTMLSelectOptionText() {
        var SelectOption = document.forms[0].HTMLSelect;
        var SelectedIndex = SelectOption.selectedIndex;
        var SelectedValue = SelectOption.value;
        var SelectedText = SelectOption.options[SelectOption.selectedIndex].text;

        var LabelDropdownList = document.getElementById('<%=lblSelectOptionText.ClientID %>');
        var sValue = 'Selected Index: ' + SelectedIndex + '<br/>Selected Value: ' + SelectedValue + '<br/>Selected Text: ' + SelectedText;

        LabelDropdownList.innerHTML = sValue;

Script tested for below browsers:
1. Internet Explorer
2. Mozilla Firefox
3. Opera
4. Google Chrome

Download Code Example C#        Download Code Example VB.Net

Posted in Client, Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *