Asp.net modules
  • Home
  • c# Modules
  • Web Design
    • Html
    • Css
    • Java Script
  • Bootstrap
  • Sql
    • Queries
    • Stored Procedures
  • About Me
    • About Myself
    • My Projects
    • My Resume
  • Photo Gallery

Thursday, March 3, 2016

Get dropdown list text and value with javascript

 Unknown     4:53 AM     js     No comments   

 Intoduction :- 
Hii Friends...
Today I explain how to get a dropdown list text and value with the help of  javascript. The main point is it depends on .text and .value. If you want to get a value of dropdown selected value then you write (.value ) otherwise you write (.Text) .

Example :-

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Welcome On Asp.Net Modules</title>
    <script type="text/javascript">
        function GetCountryDetails() {
            var name = document.getElementById("ddlName");
            document.getElementById('lbltxt').innerHTML = name.options[name.selectedIndex].text;
            document.getElementById('lblid').innerHTML = name.options[name.selectedIndex].value;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table width="50%">
        <tr>
            <td align="right">
                Select Name:
            </td>
            <td>
                <asp:DropDownList ID="ddlName" runat="server" onchange="GetCountryDetails()">
                    <asp:ListItem Text="Select" Value="0" />
                    <asp:ListItem Text="Jorge" Value="1" />
                    <asp:ListItem Text="Herry" Value="2" />
                    <asp:ListItem Text="Enguju" Value="3" />
                    <asp:ListItem Text="Yuyu" Value="4" />
                    <asp:ListItem Text="Gerry" Value="5" />
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td align="right" style="font-family: Verdana; font-size: 10pt; color: Black">
                Selected Text:
            </td>
            <td>
                <b>
                    <label id="lbltxt" />
                </b>
            </td>
        </tr>
        <tr>
            <td align="right">
                Selected text value:
            </td>
            <td>
                <b>
                    <label id="lblid" />
                </b>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Popular Posts

  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • How to make a hit-dot game in Asp.net using Java-Script
        Introduction: Hi.. Friends, Today I explain that how to make a game in asp-dot net without using any database. Its so simple ...
  • Create a Cart Popup div in HTML & CSS
    Intoduction :-   Hii Friends... Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when y...
  • How to create pikachu character using HTML & CSS
    Hii Friends... Today I explain how to create cartoon( Pikachu character) using HTML and CSS . you can use this code in your project cop...
  • Auto-Hiding Navbar with Javascript
    Intoduction :-   Hii Friends... today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • How To scroll from bottom to top
    Intoduction :- Hii Friends...   Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jque...
  • How to create Animation Using HTML & CSS
    Hii Friends... Today I explain how to create Animations using HTML and CSS . you can use this code in your project copy this code and p...
  • How To Make Semi-Transparent Buttons
    Intoduction :-   Hii Friends...   Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes t...
  • List Style
    Intoduction :-   Hii Friends... Html have 2 types of list . Ordered List and Unordered List. If you are required to put your items in a n...

Blog Archive

  • ►  2017 (13)
    • ►  December (1)
    • ►  March (5)
    • ►  February (1)
    • ►  January (6)
  • ▼  2016 (31)
    • ►  November (1)
    • ►  September (1)
    • ►  June (6)
    • ►  May (3)
    • ►  April (2)
    • ▼  March (8)
      • Box Design in html
      • Css two way hovering
      • Css hovering fill circle boundary with images bounce
      • Css hovering fill circle boundary
      • Datepicker in html
      • Css hovering fill circle
      • Create a Cart Popup div in HTML & CSS
      • Get dropdown list text and value with javascript
    • ►  February (9)
    • ►  January (1)
  • ►  2015 (31)
    • ►  December (3)
    • ►  November (4)
    • ►  October (18)
    • ►  September (6)

About Me

Unknown
View my complete profile

Copyright © Asp.net modules | Powered by Blogger
Design by Sheetal Khandelwal