How To get selected value of dropdownlist using javascript in

ASP.NET provides server-side control Dropdownlist, but this works only server-side means when we change the item, the data post back to the server, and then it returns to the client-side. We want to achieve the same thing but on the client-side using JavaScript.In this quick post, I will show you how to achieve this. Check out the following code snippet; it’s clean and clear, and easy to understand.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DiffrentColour.aspx.cs" Inherits="DiffrentColour" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
   <title>Untitled Page</title>
   <style type="text/css">
       .blue { background-color: #ADD8E6; color: #000000; }
       .red { background-color: #E20A0A; color: #ffffff; }
       .green { background-color: #3CB371; color: #ffffff; }
       .yellow { background-color: #FFF280; color: #000000; }

   <script type="text/javascript">
       function Change()
        var e = document.getElementById("ddlColor"); // select element
        var strColor = e.options[e.selectedIndex].value; //select value
        e.options[e.selectedIndex].className=strColor; //change class

<body >
   <form id="form1" runat="server">
       <asp:Panel ID="pnl" runat="Server" GroupingText="Dropdownlist">
               <asp:DropDownList ID="ddlColor" runat="Server" onchange="Change();">
                   <asp:ListItem Value="red">Red</asp:ListItem>
                   <asp:ListItem Value="blue">Blue</asp:ListItem>
                   <asp:ListItem Value="green">Green</asp:ListItem>
                   <asp:ListItem Value="yellow">Yellow</asp:ListItem>
Next Post Previous Post
No Comment
Add Comment
comment url