Get the dropdownlist selected text, value and index using JavaScript

Mohammed Imtiyaz Jun 1, 2014
Next Previous

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

Demo

Note: Index starts from '0' (Zero) 
<!DOCTYPE html>
<html>
<body>
    <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>
    </select>
</body>
</html>

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);
        }
</script>

  

Recent Post

Tags

ASP.Net Javascript SQL HTML Ajax Apps