how to dynamically bind Year in DropDownList using JavaScript

-

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to dynamically bind or populate Year in DropDownList i.e. HTML SELECT element using JavaScript.

Inside the window.onload event handler, the DropDownList i.e. HTML SELECT element will be referenced and using a For Loop, one by one Year values will be appended to the DropDownList using JavaScript.

Code for HTML page

On the  HTML page I place a  DropDownList i.e. HTML SELECT element.

<select id="ddlYears"></select>

 

 

Dynamically populating Year in DropDownList (SELECT) using JavaScript

On the window.onload event handler of the page, first the DropDownList i.e. HTML SELECT element is referenced and then the Current Year will be find using JavaScript Date object.

Then using a For Loop, one by one Year values will be increasing or appended to the DropDownList by creating a dynamic OPTION element using JavaScript.

<script type="text/javascript">

    window.onload = function () {

        //Reference the DropDownList.

        var ddlYears = document.getElementById("dropdownlist_years");

 

        //Determine the Current Year.

        var currentYear = (new Date()).getFullYear();

 

        //Loop and add the Year values to DropDownList.

        for (var i = 1950; i <= currentYear; i++) {

            var option = document.createElement("OPTION");

            option.innerHTML = i;

            option.value = i;

            ddlYears.appendChild(option);

        }

    };

</script>

 

Here I am giving complete code for HTML page. You need to copy and paste the code in your HTML page for enjoying the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    Select you DOB<select id="dropdown_Years">

    </select>

    <script type="text/javascript">

        window.onload = function () {

            //binding the DropDownList.

            var ddlYears = document.getElementById("dropdown_Years");

 

            //find the Current Year.

            var currentYear = (new Date()).getFullYear();

 

            //Loop for add the Year values to DropDownList.

            //Year started from 1950, You can set as per your requirement

            for (var i = 1950; i <= currentYear; i++) {

                var option = document.createElement("OPTION");

                option.innerHTML = i;

                option.value = i;

                ddlYears.appendChild(option);

            }

        };

    </script>

</body>

</html>

Check the Output of the complete Program

 

Conclusion: In above code, I have been explained that how to activate or enable the TextBox if other option is selected by the user from DropDownlist using JavaScript and jQuery. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Using Asp.net

Comments

Post a Comment

Popular posts from this blog

Sending reset password link for one time use only in asp.net

-
Introduction: Hello developers, in this article i will explain that how we can create and send reset password link that will use onle one time in asp.net,after one time use this link will dispose and say that this link is wrong. This is very helpful article for every .net developer Implementation: Create two pages named forgetpassword.aspx and reset.aspx. Paste the code that below am giving, separately inside the both pages. This is a sample program you can change it accoring to your requirement. Inside your table there will be a colimn named code is necessary. Code for forgetpassword.aspx page: < head runat ="server">     < title > Forget Password </ title >     < style type ="text/css">         .style1         {             width : 100% ;  ...
Read more

add delete update inside gridview using store procedure in ASP.NET

-
Image
Introduction: Hello friends, in this article i will explain that how we can insert,delete,update the data in the gridview. Here i am using the store procedure to insert,delete and update the record. With the help of the store procedure the execution of the sql  query make fast. And less  the code of the aspx.cs page. So we can say  the use of the store procedure in the sql server is very important and also very helpful. Implementation: create a new website abb a page named gallery.aspx. Drag and drop the two textboxes, a fileuploader and a button from the toolbox named txt_album_name, txt_caption, fileuploader1 and btn_insert respectively. Here i am giving the complete code for the html page.  Code for .aspx page: < table class ="style1">         < tr >             < td class ="style2">      ...
Read more

Change password using asp.net

-
Image
Introduction : Hello friends, in this article i will explain that how we can change the password after login, in asp.net.This article is very useful for the all the .net developer. Implementation : create a new website add a page. Drag and drop three textboxes and two buttons   from the toolbox inside the   < body > body tag at the .aspx page.   Below   i am giving the complete code for the html page and .cs page.  Code for default.aspx page < div >     < table style =" width : 91% ; height : 97px ; " class ="tbl_reg_form">         < tr >             < td >                 Old Password </ td >             < td >        ...
Read more