Get the dropdownlist selected text, value and index using JavaScript

Mohammed Imtiyaz Jun 1, 2014

This tutorial will show you how to get the selected text, value and index from dropdownlist using JavaScript.


Note: Index starts from '0' (Zero)
<!DOCTYPE html>
    <select id="Select1" name="D1" onChange='getDropdownElements();'>
        <option value="sel">-- Select any item --</option>
        <option value="se">Software Engineer</option>
        <option value="ce">Civil Engineer</option>
        <option value="me">Mechanical Engineer</option>
        <option value="ee">Electrical Engineer</option>

JavaScript Function

<script lang="javascript" type="text/javascript">
        function getDropdownElements() {
            var dropDownBox = document.getElementById("Select1");
            var selIndex = dropDownBox.selectedIndex;
            var selValue = dropDownBox.options[selIndex].value;
            var selText = dropDownBox.options[selIndex].text;

            alert("Selected Text : " + selText);
            alert("Selected Value : " + selValue);
            alert("Selected Item Index : " + selIndex);