Populate a dropdownlist control using Javascript in ASP.NET

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>

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

<title>Untitled Pagetitle>

var month = new Array(11);

month[0] = "Jan";

month[1] = "Feb";

month[2] = "Mar";

month[3] = "Apr";

month[4] = "May";

month[5] = "Jun";

month[6] = "Jul";

month[7] = "Aug";

month[8] = "Sep";

month[9] = "Oct";

month[10] = "Nov";

month[11] = "Dec";

var date = new Date();

function getYear()

{

var opt = new Option("Select Year", "Select Year");

document.forms[0]["ddYear"].options.add(opt);

var currentyear = date.getYear();

for (var i = 1977; i < currentyear - 3; i++)

{

var item = new Option(i, i);

document.forms[0]["ddYear"].options.add(item);

}

function getMonth() {

var opt = new Option("Select Month", "Select Month");

document.forms[0]["ddMonth"].options.add(opt);

for (var i = 0; i <= 11; i++) {

var item = new Option(month[i], month[i]);

document.forms[0]["ddMonth"].options.add(item);

}

function getDays() {

//to clear all the items from ddDay drop down list simply set the length property to 0.

document.forms[0]["ddDay"].length = 0;

if (document.forms[0]["ddYear"].selectedIndex > 0 && document.forms[0]["ddMonth"].selectedIndex > 0) {

var yy = document.forms[0]["ddYear"].value;

var mm = document.forms[0]["ddMonth"].selectedIndex;

// alert(yy + "\n" + mm);

switch (mm) {

case 1:

case 3:

case 5:

case 7:

case 8:

case 10:

case 12:

for (var i = 1; i <= 31; i++) {

var item = new Option(i, i);

document.forms[0]["ddDay"].options.add(item);

}

break;

case 4:

case 6:

case 9:

case 11:

for (var i = 1; i <= 30; i++) {

var item = new Option(i, i);

document.forms[0]["ddDay"].options.add(item);

}

break;

case 2:

//to calculate if the year is a leap year or not.

if ((yy % 400 == 0) || (yy % 100 != 0 && yy % 4 == 0)) {

for (var i = 1; i <= 29; i++) {

var item = new Option(i, i);

document.forms[0]["ddDay"].options.add(item);

}

else {

for (var i = 1; i <= 28; i++) {

var item = new Option(i, i);

document.forms[0]["ddDay"].options.add(item);

}

script>

<%--Redirecting Browser to a page if JavaScript support is not there

If you have developed a page which depends on JavaScript for form

validation or for any other purposes then you would be interested

in detecting the setting of the client browser and would like to redirect

to a different page explaining how to enable or disable JavaScript. Here we

will discuss how to check this setting and redirect to a different page accordingly.

We can detect this by using noscript tag and if the JavaScript is disabled then the

code within this noscript tag will be executed. Here is the code to do that. This code will

detect if the script setting is disabled and will redirect to a page explaining how to enable

or disable JavaScript with meta refresh in 2 seconds.

--%>

noscript>

head>

<div>

Select Date : Year :

<asp:DropDownList ID="ddYear" runat="server">

asp:DropDownList>

Month :

<asp:DropDownList ID="ddMonth" runat="server" onChange="getDays()">

asp:DropDownList>

Date :

<asp:DropDownList ID="ddDay" runat="server">

asp:DropDownList>

div>

form>

body>

html>

Design of enable_javascript.aspx.aspx page.

NOTE :- we are just simply detecting whether javascript is enabled or not. If not then it will be redirected to enable_javascript.aspx. following is the design code for the same.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="enable_javascript.aspx.vb"Inherits="enable_javascript" %>

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

<title>title>

#body_content h2 {margin-top: 15px; margin-bottom: 1px; color: #000000; FONT-SIZE: 9pt;font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;}

style>

head>

<body>

<div>

<tr><td width="100%" valign="top" class="PPDesTxt"><b>Are you using a browser that doesn't support JavaScript?b>td>tr>

<tr><td width="100%" valign="top" class="PPDesTxt">If your browser does not support JavaScript, you can upgrade to a newer browser, such as <ahref="http://www.microsoft.com/windows/ie/downloads/ie6/default.asp">Microsoft® Internet Explorer 6a> or <ahref="http://wp.netscape.com/computing/download/bdp/index.html">Netscape 6a>.td>tr>

<tr><td width="100%" valign="top" class="PPDesTxt"><b>Have you disabled JavaScript?b>td>tr>

<tr><td width="100%" valign="top" class="PPDesTxt">If you have disabled JavaScript, you must re-enable JavaScript to use this page. To enable JavaScript:<br />

<h2>

Internet Explorer 6h2>

<ol>

<li>On the <b>Toolsb> menu, click <b>Internet Optionsb>. li>

<li>Click the <b>Securityb> tab. li>

<li>Click <b>Custom Levelb>. li>

<li>Scroll to <b>Scriptingb>. Under <b>Active scriptingb>, click <b>Enableb>.

li>

<li>Click <b>OKb> twice. li>

ol>

<h2>

Netscape 6h2>

<ol>

<li>On the <b>Editb> menu, click <b>Preferencesb>. li>

<li>Click <b>Advancedb>. li>

<li>Select the <b>Enable JavaScript for Navigatorb> check box. li>

<li>Click <b>OKb>. li>

ol>

<h2>

FireFoxh2>

<ol>

<li>Click <b>Toolsb> li>

<li>Click <b>Optionsb>. li>

<li>Click <b>Contentb> li>

<li>Keep the Checkbox checked of <b>Enable JavaScirptb>. li>

<li>Click <b>OKb> li>

ol>

<br />

<SCRIPT type=text/javascript

src="https://apis.google.com/js/plusone.js">SCRIPT>

td>tr>

table>

table>td>

tr><tr><td>

div>

form>

body>
html>

Now just run you web application you'll find the year and the month which ev

this code is not working because i have use master page

this cod use without master page

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Vishal Gilbile13y ago
Hello,
The only thing you need to do is change the way you are referencing your dropdownlist control in your javascript code. The above code is article of mine only over there I'm referencing it like the followig

document.forms[0]["ddYear"]

but when you are having a master page applied on your webpage, then you need to change the way you are referencing the server side control.

you could make use of the following code.

document.getElementById('<%= "ddYear.ClientID"%>')

that's it and the remaining code would be same. just replace the line document.forms[0]["ddYear"] to what i specified.

Hope that solves your problem.

With Regards,
Vishal Gilbile.