I have a dropdownlist in asp.net that needs to be populated using javascript.

 

 

 

<asp:DropDownList style="position: static" Font-Size="Smaller" Font-Bold="true" id="ddlDay" Runat="Server"></asp:DropDownList>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<

 

script language="javascript" type

="text/javascript">

 

ddlMonth = null

;

var

 

ddlYear = null

;

 

Sys.Application.add_load(page_load);

Sys.Application.add_unload(page_unload);

 

 

function

page_load(sender, e)

{

$find(

 

"myCDECountryRegister"

).add_selectionChanged(Register_SelectedIndexChangedCountry);

ddlMonth = $get(

 

"<%=ddlMonth.ClientID %>"

);

ddlYear = $get(

 

"<%=ddlYear.ClientID %>"

);

$addHandler(ddlMonth,

 

"change"

, month_onchange);

$addHandler(ddlYear,

 

"change"

, year_onchange);

}

 

 

function

page_unload(sender, e)

{

$removeHandler(ddlMonth,

 

"change"

, month_onchange);

}

 

 

 

function

month_onchange(iMonth, iYear)

{

 

 

var days = 32 - new

Date(iYear, iMonth, 32).getDate();

alert (

 

"month"

);

alert (days);

 

}

 

 

function

year_onchange(iMonth, iYear)

{

 

 

var days = 32 - new

Date(iYear, iMonth, 32).getDate();

alert (

 

"year"

);

 Where did u  stuck?

The web service part? or the part where you need to populate the select list?

   

 I am not sure how to populate the dropdownlist.

  function AddItem(Text,Value)
    {
        // Create an Option object       

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

        // Add an Option object to Drop Down/List Box
        document.getElementById("DropDownList").options.add(opt);

        // Assign text and value to Option object
        opt.text = Text;
        opt.value = Value;

    }

I need to loop through.

 

 

function daysInMonth(iMonth, iYear)

{

 

return 32 - new Date(iYear, iMonth, 32).getDate();

}

 

totalDaysInMonth = daysInMonth(m, y);

element = document.getElementById(

"ddlDay");

 

 

for (i = 0; i < totalDaysInMonth; i++)

{

element.options[element.length] =

new Option(i, i);

}

 

how should i implement the above.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

var

ddlMonth = null

;

var

ddlYear = null

;

 

Sys.Application.add_load(page_load);

Sys.Application.add_unload(page_unload);

 

function

page_load(sender, e)

{

$find(

"myCDECountryRegister"

).add_selectionChanged(Register_SelectedIndexChangedCountry);

ddlMonth = $get(

"<%=ddlMonth.ClientID %>"

);

ddlYear = $get(

"<%=ddlYear.ClientID %>"

);

$addHandler(ddlMonth,

"change"

, month_onchange);

$addHandler(ddlYear,

"change"

, year_onchange);

 

// ddlDay.Attributes.Add("onchange", "dropdownChanged();")

}

 

function

daysInMonth(iMonth, iYear)

{

 

return 32 - new

Date(iYear, iMonth, 32).getDate();

}

 

totalDaysInMonth = daysInMonth(m, y);

element = document.getElementById(

"ddlDay"

);

 

 

for

(i = 0; i < totalDaysInMonth; i++)

{

element.options[element.length] =

new

Option(i, i);

}

 

 

function

page_unload(sender, e)

{

$removeHandler(ddlMonth,

"change"

, month_onchange);

}

 

 

function

month_onchange(iMonth, iYear)

{

 

var days = 32 - new

Date(iYear, iMonth, 32).getDate();

alert (

"month"

);

alert (days);

 

}

 

function

year_onchange(iMonth, iYear)

{

 

var days = 32 - new

Date(iYear, iMonth, 32).getDate();

alert (

"year"

);

alert (days);

 

}

 

 

function

onSuccess(result)

{

 

}

 

 

function

Register_SelectedIndexChangedCountry()

{

 

//change the images based on the selected value.

 

var countryDropdown = $get('<%=ddlCountryRegister.ClientID%>'

);

$get(

"<%=imgFlagRegister.ClientID%>").src = "./images/flags/" + countryDropdown.value + ".gif"

;

var ddlDay = $get('ddlDay');

for(var i = 0; i < 5; i++)

AddToOptionList(ddlDay, i, i);

 

 

function ClearOptions(OptionList) {

   // Always clear an option list from the last entry to the first
   for (x = OptionList.length; x >= 0; x--) {
      OptionList[x] = null;
   }
}

function AddToOptionList(OptionList, OptionValue, OptionText) {
   // Add option to the bottom of the list
   OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}

 

 hi, I wonder if you are able to get everything work.

This morning, I spent some time to write a complete sample for you. The following is the code:

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

<!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 runat="server">
    <title>Client-Centric Example</title>
</head>
<body>
    <form id="form1" runat="server">
   
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="DateTest.asmx" />
        </Services>
    </asp:ScriptManager>

<select id="ddlYear" >
</select>   

<select id="ddlMonth" >
</select>   

<select id="ddlDay" >
</select>   

    <script type="text/javascript">
    <!--
       
        var ddlYear = null;
        var ddlMonth = null;
        var ddlDay = null;
   
        Sys.Application.add_load(page_load);
        Sys.Application.add_unload(page_unload);
       
        function page_load(sender, e){           
            ddlYear = $get("ddlYear");
            ddlMonth = $get("ddlMonth");
            ddlDay = $get("ddlDay");

            DateTest.GetYears(onGetYears);
       
            $addHandler(ddlYear, "change", year_onchange);
            $addHandler(ddlMonth, "change", month_onchange);
         }
       
        function page_unload(sender, e){           
            $removeHandler(ddlYear, "change", year_onchange);
            $removeHandler(ddlMonth, "change", month_onchange);
        }
   
        function year_onchange(sender, e){
            var y = ddlYear.value;
            DateTest.GetMonths(y,onGetMonths);
        }

        function month_onchange(sender, e){
            var y = ddlYear.value;
            var m = ddlMonth.value;
//           alert(y + " " + m);
           DateTest.GetDays(y,m,onGetDays);
        }
       
        function onGetYears(result){
            for(var i = 0; i<result.length; i++)
            {AddToOptionList(ddlYear, result,result);
            }
        }

        function onGetMonths(result){
            ClearOptions(ddlMonth);
            for(var i = 0; i<result.length; i++)
            {AddToOptionList(ddlMonth, i,result);
            }
        }
  
       function onGetDays(result){
             ClearOptions(ddlDay);
            for(var i = 0; i<result.length; i++)
            AddToOptionList(ddlDay,i,result);
        }
        
          function AddToOptionList(OptionList, OptionValue, OptionText) {
                // Add option to the bottom of the list
                OptionList[OptionList.length] = new Option(OptionText, OptionValue);
            }

       
    function ClearOptions(OptionList) {

   // Always clear an option list from the last entry to the first
   for (x = OptionList.length; x >= 0; x--) {
      OptionList[x] = null;
   }
}

    //-->
    </script>
           
    </form>
</body>
</html>

Tuis is the code for the DateTest web service:

DateTest.asmx

 <%@ WebService Language="C#" CodeBehind="~/App_Code/DateTest.cs" Class="DateTest" %>

DateTest.cs

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

/// <summary>
/// Summary description for DateTest
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class DateTest : System.Web.Services.WebService {

    public DateTest () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World";
    }

    [WebMethod]
    public int[ GetYears()
    {
        int[ years = new int[10];

        for (int i = 0; i < years.Length; i++)
            years = 2000 + i;

        return years;
    }

    [WebMethod]
    public string[ GetMonths(string value)
    {
        string[ month1 = new string[ { "Jan", "Feb", "Mar", "April" };
        string[ month2 = new string[ { "May", "June", "July", "Aug" };
        string[ month3 = new string[ { "Sep", "Oct", "Nov", "Dec" };

        if (int.Parse(value) < 2006)
            return month1;

        if (int.Parse(value) > 2006 && int.Parse(value) < 2008)
            return month2;

        return month3;

    }

    [WebMethod]
    public int[ GetDays(string value1, string value2)
    {
        int[ days = new int[10];
        int i;
        if (int.Parse(value1) < 2006 && int.Parse(value2) < 2)
        {
            for (i = 0; i < 10; i++)
                days = i;
        }
        else if (int.Parse(value1) < 2006 && int.Parse(value2) > 2)
        {
            for (i = 0; i < 10; i++)
                days = i + 10;
        }
        else if (int.Parse(value1) > 2006 && int.Parse(value2) < 2)
        {
            for (i = 0; i < 10; i++)
                days = i + 20;

        }
        else
            for (i = 0; i < 10; i++)
                days = i + 15;

        return days;

    }

}

Hope this will relieve all of your frustrations regarding this cascading thing.

 Hi thank you again for your help,

Should I do this all in javascript or have two cascading dropdowns for the month and year?

 

 I would prefer to use a purely client-centric way.

 
            function month_onchange(sender, e)
            {
             var y = ddlYear.options[ddlYear.selectedIndex].text;
             var m = ddlMonth.value;
           
                // Add an Option object to Drop Down/List Box
              var totalDaysInMonth = daysInMonth(m, y);
             var element = document.getElementById("ddlDay");
             alert (totalDaysInMonth);
             for (var i = 0; i < totalDaysInMonth; i++)
             {
                 element.options[element.length] = new Option(i, i);
             }                  
            }
the dropdownlist does not show any values is there something I am missing in the behind code.
 

<asp:Label ID="lblDOB" runat="server">Date of Birth:
            </asp:Label>
            &nbsp;
            <ajaxToolkit:CascadingDropDown ID="cddMonth" runat="server" Category="Month"
                TargetControlId="ddlMonth" SelectedValue=""
                LoadingText="[Loading Months...]"
                ServicePath="../LocationService.asmx"
                ServiceMethod="GetMonthList" Enabled="True" />
               
            <ajaxToolkit:CascadingDropDown ID="cddYear" runat="server" Category="Year"
                TargetControlId="ddlYear" SelectedValue=""
                LoadingText="[Loading Year...]"
                ServicePath="../LocationService.asmx"
                ServiceMethod="GetYearList" Enabled="True" />
            &nbsp; &nbsp;&nbsp;
        </td>
        <td align="left" bordercolor="#f6cccc" height="35" style="width: 60%">
          <asp:DropDownList style="position: static" Font-Size="Smaller" Font-Bold="true" id="ddlMonth" Runat="Server"></asp:DropDownList>&nbsp;
           <asp:DropDownList style="position: static" Font-Size="Smaller" Font-Bold="true" id="ddlDay" Runat="Server"></asp:DropDownList>&nbsp;
           <asp:DropDownList style="position: static" Font-Size="Smaller" Font-Bold="true" id="ddlYear" Runat="Server"></asp:DropDownList>&nbsp;
         

  alert (totalDaysInMonth);

Was this line executed? You can set breakpoint with firebug to debug.

 this gives me the correct number of days for feb 1988 ==> 29

It is the populating of the dropdown is empty

The dropdown display like a blank. it is weird.

 

I think the populated options were lost when the page gets posted back then subsequently refreshed, the populated options gets wiped out. That is why I would prefer a client-centric approach.  

it is normal because the dropdownlist has a runat=server

so when it is ran and produces the html the id will change.

I got it running but I think I just want this whole thing in javascript.

 

 

script language="javascript" type

="text/javascript">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

///var usernameCheckerTimer;

///var spanAvailability = $get("spanAvailability");

///Sys.Application.add_load(Register_pageLoad);

// function Register_pageLoad(sender, args)

// {

// $find("myCDECountryRegister").add_selectionChanged(Register_SelectedIndexChangedCountry);

// $find("myCDEDay").add_selectionChanged(Register_SelectedIndexChangedDaysInMonth);

// }

//

 

 

var ddlYear = null

;

 

 

var ddlMonth = null

;

 

 

var ddlDay = null

;

 

 

 

Sys.Application.add_load(page_load);

Sys.Application.add_unload(page_unload);

 

 

function

page_load(sender, e)

{

$find(

 

"myCDECountryRegister"

).add_selectionChanged(Register_SelectedIndexChangedCountry);

ddlMonth = $get(

 

"<%=ddlMonth.ClientID %>"

);

ddlYear = document.getElementById(

 

"<%=ddlYear.ClientID%>"

);

ddlDay = $get(

 

"ddlDay"

);

$addHandler(ddlYear,

 

"change"

, year_onchange);

$addHandler(ddlMonth,

 

"change"

, month_onchange);

}

 

 

function

page_unload(sender, e)

{

$removeHandler(ddlYear,

 

"change"

, year_onchange);

$removeHandler(ddlMonth,

 

"change"

, month_onchange);

}

 

 

 

 

function

month_onchange(sender, e)

{

 

 

var

y = ddlYear.options[ddlYear.selectedIndex].text;

 

 

var

m = ddlMonth.value;

 

 

 

// Add an Option object to Drop Down/List Box

 

 

var

totalDaysInMonth = daysInMonth(m, y);

 

 

var myLists = document.getElementsByTagName("select"

)

 

 

 

/*assuming that the select you are interested is <select name=c>...</select> */

 

 

var

element = myLists[1];

element.options.length=0;

 

 

for (var

i = 0; i < totalDaysInMonth; i++)

{

element.options[element.options.length] =

 

new

Option(i+1, i);

}

}

 

 

 

 

function

year_onchange(sender, e)

{

 

 

var

y = ddlYear.options[ddlYear.selectedIndex].text;

 

 

var

m = ddlMonth.value;

 

 

 

// Add an Option object to Drop Down/List Box

 

 

var

totalDaysInMonth = daysInMonth(m, y);

 

 

var myLists = document.getElementsByTagName("select"

)

 

 

 

/*assuming that the select you are interested is <select name=c>...</select> */

 

 

var

element = myLists[1];

element.options.length=0;

 

 

for (var

i = 0; i < totalDaysInMonth; i++)

{

element.options[element.options.length] =

 

new

Option(i+1, i);

}

 

 

}

 

 

 

function

daysInMonth(iMonth, iYear)

{

 

 

return 32 - new

Date(iYear, iMonth, 32).getDate();

}

 

 

 

 

function

Register_SelectedIndexChangedCountry()

{

 

 

//change the images based on the selected value.

 

 

var countryDropdown = $get('<%=ddlCountryRegister.ClientID%>'

);

$get(

 

"<%=imgFlagRegister.ClientID%>").src = "./images/flags/" + countryDropdown.value + ".gif"

;

the above code is working.