Get asp.net drop down list Selected value and text using javascript

when web application development, JavaScript plays a major role in client side validations, displaying values, value calculation and much more. In this article i'll provide simple example of getting a selected value and text in Asp.Net dropdown List using client side click event. Hope this will be helpful for someone. Here we go:

If the selected Value is 0, it notifies user to select a country as a simple validation. Following code snippet elaborates JavaScript function, I have used the ClientID to get the control ID. GetSelectedCountry() is the function that i'm gonna call in onclick event in button control. Note this also can be done using jQuery also.

<script type="text/javascript">
    function GetSelectedCountry() {

        var countryCtrl = document.getElementById('<%=drpCountryList.ClientID %>');
        if (countryCtrl != 'undefined' || countryCtrl != null) {
            var selectedValue = countryCtrl.options[countryCtrl.selectedIndex].value;
            var SelectedText = countryCtrl[countryCtrl.selectedIndex].text;

           // simple validation, if user doesn't select a country, 
           // this will display an alert to the user.
            if (selectedValue == 0) {
                alert("Please select a country to continue!");
                return false;
            }

            var lbl = document.getElementById('<%=lblSelectedCountry.ClientID %>');
            if (lbl != 'undefined' || lbl != null) {
                lbl.innerHTML = "Selected Value: " + selectedValue + "<br/>" + 
                                "Selected Text: " + SelectedText;
            }
        }
    }
</script>

Following code snippet for the HTML markup which display the sample country list

<table style="border: 1px solid black;" cellpadding="3" cellspacing="3">
    <tr>
        <td colspan="2">
            <h3>Get Selected Value & Text using JavaScript</h3>
        </td>
    </tr>
    <tr>
        <td>
            <asp:DropDownList runat="server" ID="drpCountryList">
                <asp:ListItem Value="0" Text="Please Select" Selected="True" />
                <asp:ListItem Value="AF" Text="Afghanistan" />
                <asp:ListItem Value="AX" Text="Åland Islands" />
                <asp:ListItem Value="AL" Text="Albania" />
                <asp:ListItem Value="DZ" Text="Algeria" />
                <asp:ListItem Value="AS" Text="American Samoa" />
                <asp:ListItem Value="AD" Text="Andorra" />
                <asp:ListItem Value="AO" Text="Angola" />
                <asp:ListItem Value="AI" Text="Anguilla" />
                <asp:ListItem Value="AQ" Text="Antarctica" />
                <asp:ListItem Value="AG" Text="Antigua and Barbuda" />
                <asp:ListItem Value="AR" Text="Argentina" />
                <asp:ListItem Value="AM" Text="Armenia" />
                <asp:ListItem Value="AW" Text="Aruba" />
                <asp:ListItem Value="AU" Text="Australia" />
                <asp:ListItem Value="AT" Text="Austria" />
                <asp:ListItem Value="AZ" Text="Azerbaijan" />
                <asp:ListItem Value="BS" Text="Bahamas" />
                <asp:ListItem Value="BH" Text="Bahrain" />
                <asp:ListItem Value="BD" Text="Bangladesh" />
                <asp:ListItem Value="BB" Text="Barbados" />
                <asp:ListItem Value="BY" Text="Belarus" />
                <asp:ListItem Value="BE" Text="Belgium" />
                <asp:ListItem Value="BZ" Text="Belize" />
                <asp:ListItem Value="BJ" Text="Benin" />
                <asp:ListItem Value="BM" Text="Bermuda" />
                <asp:ListItem Value="BT" Text="Bhutan" />
                <asp:ListItem Value="BO" Text="Bolivia" />
                <asp:ListItem Value="BA" Text="Bosnia and Herzegovina" />
                <asp:ListItem Value="BW" Text="Botswana" />
                <asp:ListItem Value="BV" Text="Bouvet Island" />
                <asp:ListItem Value="BR" Text="Brazil" />
                <asp:ListItem Value="IO" Text="British Indian Ocean Territory" />
                <asp:ListItem Value="BN" Text="Brunei Darussalam" />
                <asp:ListItem Value="BG" Text="Bulgaria" />
                <asp:ListItem Value="BF" Text="Burkina Faso" />
                <asp:ListItem Value="BI" Text="Burundi" />
                <asp:ListItem Value="KH" Text="Cambodia" />
                <asp:ListItem Value="CM" Text="Cameroon" />
                <asp:ListItem Value="CA" Text="Canada" />
                <asp:ListItem Value="CV" Text="Cape Verde" />
                <asp:ListItem Value="KY" Text="Cayman Islands" />
                <asp:ListItem Value="CF" Text="Central African Republic" />
                <asp:ListItem Value="TD" Text="Chad" />
                <asp:ListItem Value="CL" Text="Chile" />
                <asp:ListItem Value="CN" Text="China" />
                <asp:ListItem Value="CX" Text="Christmas Island" />
                <asp:ListItem Value="CC" Text="Cocos (Keeling) Islands" />
                <asp:ListItem Value="CO" Text="Colombia" />
                <asp:ListItem Value="KM" Text="Comoros" />
                <asp:ListItem Value="CG" Text="Congo" />
                <asp:ListItem Value="CD" Text="Congo, The Democratic Republic of The" />
                <asp:ListItem Value="CK" Text="Cook Islands" />
                <asp:ListItem Value="CR" Text="Costa Rica" />
                <asp:ListItem Value="CI" Text="Cote D'ivoire" />
                <asp:ListItem Value="HR" Text="Croatia" />
                <asp:ListItem Value="CU" Text="Cuba" />
                <asp:ListItem Value="CY" Text="Cyprus" />
                <asp:ListItem Value="CZ" Text="Czech Republic" />
                <asp:ListItem Value="DK" Text="Denmark" />
                <asp:ListItem Value="DJ" Text="Djibouti" />
                <asp:ListItem Value="DM" Text="Dominica" />
                <asp:ListItem Value="DO" Text="Dominican Republic" />
                <asp:ListItem Value="EC" Text="Ecuador" />
                <asp:ListItem Value="EG" Text="Egypt" />
                <asp:ListItem Value="SV" Text="El Salvador" />
                <asp:ListItem Value="GQ" Text="Equatorial Guinea" />
                <asp:ListItem Value="ER" Text="Eritrea" />
                <asp:ListItem Value="EE" Text="Estonia" />
                <asp:ListItem Value="ET" Text="Ethiopia" />
                <asp:ListItem Value="FK" Text="Falkland Islands (Malvinas)" />
                <asp:ListItem Value="FO" Text="Faroe Islands" />
                <asp:ListItem Value="FJ" Text="Fiji" />
                <asp:ListItem Value="FI" Text="Finland" />
                <asp:ListItem Value="FR" Text="France" />
                <asp:ListItem Value="GF" Text="French Guiana" />
                <asp:ListItem Value="PF" Text="French Polynesia" />
                <asp:ListItem Value="TF" Text="French Southern Territories" />
                <asp:ListItem Value="GA" Text="Gabon" />
                <asp:ListItem Value="GM" Text="Gambia" />
                <asp:ListItem Value="GE" Text="Georgia" />
                <asp:ListItem Value="DE" Text="Germany" />
                <asp:ListItem Value="GH" Text="Ghana" />
                <asp:ListItem Value="GI" Text="Gibraltar" />
                <asp:ListItem Value="GR" Text="Greece" />
                <asp:ListItem Value="GL" Text="Greenland" />
                <asp:ListItem Value="GD" Text="Grenada" />
                <asp:ListItem Value="GP" Text="Guadeloupe" />
                <asp:ListItem Value="GU" Text="Guam" />
                <asp:ListItem Value="GT" Text="Guatemala" />
                <asp:ListItem Value="GG" Text="Guernsey" />
                <asp:ListItem Value="GN" Text="Guinea" />
                <asp:ListItem Value="GW" Text="Guinea-bissau" />
                <asp:ListItem Value="GY" Text="Guyana" />
                <asp:ListItem Value="HT" Text="Haiti" />
                <asp:ListItem Value="HM" Text="Heard Island and Mcdonald Islands" />
                <asp:ListItem Value="VA" Text="Holy See (Vatican City State)" />
                <asp:ListItem Value="HN" Text="Honduras" />
                <asp:ListItem Value="HK" Text="Hong Kong" />
                <asp:ListItem Value="HU" Text="Hungary" />
                <asp:ListItem Value="IS" Text="Iceland" />
                <asp:ListItem Value="IN" Text="India" />
                <asp:ListItem Value="ID" Text="Indonesia" />
                <asp:ListItem Value="IR" Text="Iran, Islamic Republic of" />
                <asp:ListItem Value="IQ" Text="Iraq" />
                <asp:ListItem Value="IE" Text="Ireland" />
                <asp:ListItem Value="IM" Text="Isle of Man" />
                <asp:ListItem Value="IL" Text="Israel" />
                <asp:ListItem Value="IT" Text="Italy" />
                <asp:ListItem Value="JM" Text="Jamaica" />
                <asp:ListItem Value="JP" Text="Japan" />
                <asp:ListItem Value="JE" Text="Jersey" />
                <asp:ListItem Value="JO" Text="Jordan" />
                <asp:ListItem Value="KZ" Text="Kazakhstan" />
                <asp:ListItem Value="KE" Text="Kenya" />
                <asp:ListItem Value="KI" Text="Kiribati" />
                <asp:ListItem Value="KP" Text="Korea, Democratic People's Republic of" />
                <asp:ListItem Value="KR" Text="Korea, Republic of" />
                <asp:ListItem Value="KW" Text="Kuwait" />
                <asp:ListItem Value="KG" Text="Kyrgyzstan" />
                <asp:ListItem Value="LA" Text="Lao People's Democratic Republic" />
                <asp:ListItem Value="LV" Text="Latvia" />
                <asp:ListItem Value="LB" Text="Lebanon" />
                <asp:ListItem Value="LS" Text="Lesotho" />
                <asp:ListItem Value="LR" Text="Liberia" />
                <asp:ListItem Value="LY" Text="Libyan Arab Jamahiriya" />
                <asp:ListItem Value="LI" Text="Liechtenstein" />
                <asp:ListItem Value="LT" Text="Lithuania" />
                <asp:ListItem Value="LU" Text="Luxembourg" />
                <asp:ListItem Value="MO" Text="Macao" />
                <asp:ListItem Value="MK" Text="Macedonia, The Former Yugoslav Republic of" />
                <asp:ListItem Value="MG" Text="Madagascar" />
                <asp:ListItem Value="MW" Text="Malawi" />
                <asp:ListItem Value="MY" Text="Malaysia" />
                <asp:ListItem Value="MV" Text="Maldives" />
                <asp:ListItem Value="ML" Text="Mali" />
                <asp:ListItem Value="MT" Text="Malta" />
                <asp:ListItem Value="MH" Text="Marshall Islands" />
                <asp:ListItem Value="MQ" Text="Martinique" />
                <asp:ListItem Value="MR" Text="Mauritania" />
                <asp:ListItem Value="MU" Text="Mauritius" />
                <asp:ListItem Value="YT" Text="Mayotte" />
                <asp:ListItem Value="MX" Text="Mexico" />
                <asp:ListItem Value="FM" Text="Micronesia, Federated States of" />
                <asp:ListItem Value="MD" Text="Moldova, Republic of" />
                <asp:ListItem Value="MC" Text="Monaco" />
                <asp:ListItem Value="MN" Text="Mongolia" />
                <asp:ListItem Value="ME" Text="Montenegro" />
                <asp:ListItem Value="MS" Text="Montserrat" />
                <asp:ListItem Value="MA" Text="Morocco" />
                <asp:ListItem Value="MZ" Text="Mozambique" />
                <asp:ListItem Value="MM" Text="Myanmar" />
                <asp:ListItem Value="NA" Text="Namibia" />
                <asp:ListItem Value="NR" Text="Nauru" />
                <asp:ListItem Value="NP" Text="Nepal" />
                <asp:ListItem Value="NL" Text="Netherlands" />
                <asp:ListItem Value="AN" Text="Netherlands Antilles" />
                <asp:ListItem Value="NC" Text="New Caledonia" />
                <asp:ListItem Value="NZ" Text="New Zealand" />
                <asp:ListItem Value="NI" Text="Nicaragua" />
                <asp:ListItem Value="NE" Text="Niger" />
                <asp:ListItem Value="NG" Text="Nigeria" />
                <asp:ListItem Value="NU" Text="Niue" />
                <asp:ListItem Value="NF" Text="Norfolk Island" />
                <asp:ListItem Value="MP" Text="Northern Mariana Islands" />
                <asp:ListItem Value="NO" Text="Norway" />
                <asp:ListItem Value="OM" Text="Oman" />
                <asp:ListItem Value="PK" Text="Pakistan" />
                <asp:ListItem Value="PW" Text="Palau" />
                <asp:ListItem Value="PS" Text="Palestinian Territory, Occupied" />
                <asp:ListItem Value="PA" Text="Panama" />
                <asp:ListItem Value="PG" Text="Papua New Guinea" />
                <asp:ListItem Value="PY" Text="Paraguay" />
                <asp:ListItem Value="PE" Text="Peru" />
                <asp:ListItem Value="PH" Text="Philippines" />
                <asp:ListItem Value="PN" Text="Pitcairn" />
                <asp:ListItem Value="PL" Text="Poland" />
                <asp:ListItem Value="PT" Text="Portugal" />
                <asp:ListItem Value="PR" Text="Puerto Rico" />
                <asp:ListItem Value="QA" Text="Qatar" />
                <asp:ListItem Value="RE" Text="Reunion" />
                <asp:ListItem Value="RO" Text="Romania" />
                <asp:ListItem Value="RU" Text="Russian Federation" />
                <asp:ListItem Value="RW" Text="Rwanda" />
                <asp:ListItem Value="SH" Text="Saint Helena" />
                <asp:ListItem Value="KN" Text="Saint Kitts and Nevis" />
                <asp:ListItem Value="LC" Text="Saint Lucia" />
                <asp:ListItem Value="PM" Text="Saint Pierre and Miquelon" />
                <asp:ListItem Value="VC" Text="Saint Vincent and The Grenadines" />
                <asp:ListItem Value="WS" Text="Samoa" />
                <asp:ListItem Value="SM" Text="San Marino" />
                <asp:ListItem Value="ST" Text="Sao Tome and Principe" />
                <asp:ListItem Value="SA" Text="Saudi Arabia" />
                <asp:ListItem Value="SN" Text="Senegal" />
                <asp:ListItem Value="RS" Text="Serbia" />
                <asp:ListItem Value="SC" Text="Seychelles" />
                <asp:ListItem Value="SL" Text="Sierra Leone" />
                <asp:ListItem Value="SG" Text="Singapore" />
                <asp:ListItem Value="SK" Text="Slovakia" />
                <asp:ListItem Value="SI" Text="Slovenia" />
                <asp:ListItem Value="SB" Text="Solomon Islands" />
                <asp:ListItem Value="SO" Text="Somalia" />
                <asp:ListItem Value="ZA" Text="South Africa" />
                <asp:ListItem Value="GS" Text="South Georgia and The South Sandwich Islands" />
                <asp:ListItem Value="ES" Text="Spain" />
                <asp:ListItem Value="LK" Text="Sri Lanka" />
                <asp:ListItem Value="SD" Text="Sudan" />
                <asp:ListItem Value="SR" Text="Suriname" />
                <asp:ListItem Value="SJ" Text="Svalbard and Jan Mayen" />
                <asp:ListItem Value="SZ" Text="Swaziland" />
                <asp:ListItem Value="SE" Text="Sweden" />
                <asp:ListItem Value="CH" Text="Switzerland" />
                <asp:ListItem Value="SY" Text="Syrian Arab Republic" />
                <asp:ListItem Value="TW" Text="Taiwan, Province of China" />
                <asp:ListItem Value="TJ" Text="Tajikistan" />
                <asp:ListItem Value="TZ" Text="Tanzania, United Republic of" />
                <asp:ListItem Value="TH" Text="Thailand" />
                <asp:ListItem Value="TL" Text="Timor-leste" />
                <asp:ListItem Value="TG" Text="Togo" />
                <asp:ListItem Value="TK" Text="Tokelau" />
                <asp:ListItem Value="TO" Text="Tonga" />
                <asp:ListItem Value="TT" Text="Trinidad and Tobago" />
                <asp:ListItem Value="TN" Text="Tunisia" />
                <asp:ListItem Value="TR" Text="Turkey" />
                <asp:ListItem Value="TM" Text="Turkmenistan" />
                <asp:ListItem Value="TC" Text="Turks and Caicos Islands" />
                <asp:ListItem Value="TV" Text="Tuvalu" />
                <asp:ListItem Value="UG" Text="Uganda" />
                <asp:ListItem Value="UA" Text="Ukraine" />
                <asp:ListItem Value="AE" Text="United Arab Emirates" />
                <asp:ListItem Value="GB" Text="United Kingdom" />
                <asp:ListItem Value="US" Text="United States" />
                <asp:ListItem Value="UM" Text="United States Minor Outlying Islands" />
                <asp:ListItem Value="UY" Text="Uruguay" />
                <asp:ListItem Value="UZ" Text="Uzbekistan" />
                <asp:ListItem Value="VU" Text="Vanuatu" />
                <asp:ListItem Value="VE" Text="Venezuela" />
                <asp:ListItem Value="VN" Text="Viet Nam" />
                <asp:ListItem Value="VG" Text="Virgin Islands, British" />
                <asp:ListItem Value="VI" Text="Virgin Islands, U.S." />
                <asp:ListItem Value="WF" Text="Wallis and Futuna" />
                <asp:ListItem Value="EH" Text="Western Sahara" />
                <asp:ListItem Value="YE" Text="Yemen" />
                <asp:ListItem Value="ZM" Text="Zambia" />
                <asp:ListItem Value="ZW" Text="Zimbabwe" />
            </asp:DropDownList>
        </td>
        <td>
            <input type="button" name="name" value="Get Country " 
            onclick="GetSelectedCountry();" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Label ID="lblSelectedCountry" Text="" runat="server" />
        </td>
    </tr>
</table>

Download