Post
Ask Question

Get DropDownList , Value, Index and Text in ASP.NET using JavaScript

Step 1: Create new web application in visual studio.

Step 2: Add one webform to application. In this tutorial we added WebForm1 in application.

Step 3: Add on DropDownList control to webform.

Step 4: Design webform as follows.

  1. <%@ Page Language="C#" AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs" Inherits="DropDownListJS.WebForm1" %>  
  2.   
  3.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5.     <html xmlns="http://www.w3.org/1999/xhtml">  
  6.   
  7.     <head runat="server">  
  8.   
  9.         <title></title>  
  10.   
  11.         <script type="text/javascript">  
  12.             function GetListDetails() {  
  13.   
  14.                 var param = document.getElementById('ddlColors');  
  15.   
  16.                 document.getElementById('lblText').innerHTML = param.options[param.selectedIndex].text;  
  17.   
  18.                 document.getElementById('lblValue').innerHTML = param.options[param.selectedIndex].value;  
  19.   
  20.                 document.getElementById('lblIndex').innerHTML = param.options[param.selectedIndex].index;  
  21.   
  22.             }  
  23.         </script>  
  24.   
  25.     </head>  
  26.   
  27.     <body>  
  28.   
  29.         <form id="form1" runat="server">  
  30.   
  31.             <div>  
  32.   
  33.                 <table>  
  34.   
  35.                     <tr>  
  36.   
  37.                         <td>  
  38.   
  39.                             Colors  
  40.   
  41.                         </td>  
  42.   
  43.                         <td>  
  44.   
  45.                             <asp:DropDownList ID="ddlColors" runat="server" onchange="GetListDetails()">  
  46.   
  47.                                 <asp:ListItem Text="Select" Value="0" />  
  48.   
  49.                                 <asp:ListItem Text="Red" Value="11" />  
  50.   
  51.                                 <asp:ListItem Text="Green" Value="22" />  
  52.   
  53.                                 <asp:ListItem Text="Blue" Value="33" />  
  54.   
  55.                             </asp:DropDownList>  
  56.   
  57.                         </td>  
  58.   
  59.                     </tr>  
  60.   
  61.                     <tr>  
  62.   
  63.                         <td>  
  64.   
  65.                             Selecte Index :  
  66.   
  67.                         </td>  
  68.   
  69.                         <td>  
  70.   
  71.                             <label id="lblIndex">  
  72.   
  73.                             </label>  
  74.   
  75.                         </td>  
  76.   
  77.                     </tr>  
  78.   
  79.                     <tr>  
  80.   
  81.                         <td>  
  82.   
  83.                             Selecte Text :  
  84.   
  85.                         </td>  
  86.   
  87.                         <td>  
  88.   
  89.                             <label id="lblText">  
  90.   
  91.                             </label>  
  92.   
  93.                         </td>  
  94.   
  95.                     </tr>  
  96.   
  97.                     <tr>  
  98.   
  99.                         <td>  
  100.   
  101.                             Selecte Value :  
  102.   
  103.                         </td>  
  104.   
  105.                         <td>  
  106.   
  107.                             <label id="lblValue">  
  108.   
  109.                             </label>  
  110.   
  111.                         </td>  
  112.   
  113.                     </tr>  
  114.   
  115.                 </table>  
  116.   
  117.             </div>  
  118.   
  119.         </form>  
  120.   
  121.     </body>  
  122.   
  123.     </html>  

Step 5: Run application.

Step 6: Change color.