Jquery to load dropdown on selected index change of another drop down in sharepoint 2010

Question

I have 2 dropdowns. On Selected Index change event of ddlTaskFrequency dropdown i want to load another drop down.

For example: If ddlTaskFrequency text= Daily or Weekly i have to load another dropdown ddlDayofMonth with 1,2,3,4,.....31. If it is of Monthly then ddlDayofMonth with 1,2,3,4..12. I want to achieve this using Jquery.Can any one help me on the same.Below is my jQuery

**Jquery**

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $('#' + '<%=this.Panel2.ClientID  %>').hide();

            $('#' + '<%=this.ddlTaskFrequency.ClientID  %>').change(function () {

                dropdown = $('#' + '<%=this.ddlTaskFrequency.ClientID  %>').val();
                if (dropdown == "Day's(at)") 
                {
                    $('#' + '<%=this.Panel1.ClientID  %>').show();
                    $('#' + '<%=this.Panel2.ClientID  %>').hide();
                }
                if (dropdown == "Week's(at)") {
                    $('#' + '<%=this.Panel1.ClientID  %>').show();
                    $('#' + '<%=this.Panel2.ClientID  %>').hide();

                }
                if (dropdown == "Month's(at)") 
                {
                    $('#' + '<%=this.Panel1.ClientID  %>').hide();
                    $('#' + '<%=this.Panel2.ClientID  %>').show();
                }
                $('#' + '<%=this.lblNameChange.ClientID  %>').text($('#' + '<%=this.ddlTaskFrequency.ClientID  %>').val());
                return false;
            })
        });

    </script>

**1st dropdown**
    <td>
                <asp:DropDownList ID="ddlTaskFrequency" runat="server" onselectedindexchanged="ddlTaskFrequency_SelectedIndexChanged" AutoPostBack="true">
                    <asp:ListItem Selected="True" Text="Daily" Value="Day's(at)"></asp:ListItem>
                    <asp:ListItem Text="Weekly" Value="Week's(at)"></asp:ListItem>
                    <asp:ListItem Text="Monthly" Value="Month's(at)"></asp:ListItem>
                </asp:DropDownList>
            </td>

**2nd dropdown**

    <asp:DropDownList ID="ddlDayofMonth" runat="server" Height="18px" Width="80px" AutoPostBack="true"></asp:DropDownList>

Answer 1

you need to use a event so when you'll change the value on ddlTaskFrequency the other dropdown with the values appear.

You can find thousand of example in the network, like this: http://jsfiddle.net/krustev/xuZn9/

Answer 2

I tried Like this But it is not loading the data

  <script language="javascript" type="text/javascript" src="/_layouts/js/jquery-1.10.2.js"></script>
    <script language="javascript" type="text/javascript">
        $.ajax({
            type: "POST",
            url: "/AlertSchedular/TaskAlertSettings.aspx/BindDatatoDropdown",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var Dropdown = $('#<%=ddlDayofMonth.ClientID %>');
                alert(Dropdown);
                Dropdown.append(new Option("SELECT", 0));
                $.each(response.d, function (index, item) {
                    Dropdown.append(new Option(item.dayCount, item.dayId));
                });
            },
            error: function () {
                alert("Failed to load data");
            }
        });

        $(document).ready(function () {

            $('#' + '<%=this.Panel2.ClientID  %>').hide();

            $('#' + '<%=this.ddlTaskFrequency.ClientID  %>').change(function () {

                mydropdown = $('#' + '<%=this.ddlTaskFrequency.ClientID  %>').val();
                if (mydropdown == "Day's(at)") {
                    $('#' + '<%=this.Panel1.ClientID  %>').show();
                    $('#' + '<%=this.Panel2.ClientID  %>').hide();
                }
                if (mydropdown == "Week's(at)") {
                    $('#' + '<%=this.Panel1.ClientID  %>').show();
                    $('#' + '<%=this.Panel2.ClientID  %>').hide();

                }
                if (mydropdown == "Month's(at)") {
                    $('#' + '<%=this.Panel1.ClientID  %>').hide();
                    $('#' + '<%=this.Panel2.ClientID  %>').show();
                }
                $('#' + '<%=this.lblNameChange.ClientID  %>').text($('#' + '<%=this.ddlTaskFrequency.ClientID  %>').val());
                return false;
            })
        });

    </script>

aspx:

public partial class TaskAlertSettings : LayoutsPageBase
    {

        public string dayCount { get; set; }
        public int dayId { get; set; }

 public static DataTable GetTable()
        {

            DataTable table = new DataTable();
            table.Columns.Add("Dayid", typeof(int));
            table.Columns.Add("Days", typeof(string));
            table.Rows.Add(1, "1");
            table.Rows.Add(2, "2");
            table.Rows.Add(3, "3");
            table.Rows.Add(4, "4");
            table.Rows.Add(5, "5");
            table.Rows.Add(6, "6");
            table.Rows.Add(7, "7");
            table.Rows.Add(8, "8");
            table.Rows.Add(9, "9");
            table.Rows.Add(10, "10");
            table.Rows.Add(11, "11");
            table.Rows.Add(12, "12");
            table.Rows.Add(13, "13");
            table.Rows.Add(14, "14");
            table.Rows.Add(15, "15");
            table.Rows.Add(16, "16");
            table.Rows.Add(17, "17");
            table.Rows.Add(18, "18");
            table.Rows.Add(19, "19");
            table.Rows.Add(20, "20");
            table.Rows.Add(21, "21");
            table.Rows.Add(22, "22");
            table.Rows.Add(23, "23");
            table.Rows.Add(24, "24");
            table.Rows.Add(25, "25");
            table.Rows.Add(26, "26");
            table.Rows.Add(27, "27");
            table.Rows.Add(28, "28");
            table.Rows.Add(29, "29");
            table.Rows.Add(30, "30");
            table.Rows.Add(31, "31");
            return table;
        }


        [WebMethod]
        public static TaskAlertSettings[] BindDatatoDropdown()
        {

            DataTable dt = GetTable();
            List<TaskAlertSettings> details = new List<TaskAlertSettings>();
            foreach (DataRow dtrow in dt.Rows)
            {
                TaskAlertSettings myobj = new TaskAlertSettings();
                myobj.dayId = Convert.ToInt32(dtrow["Dayid"].ToString());
                myobj.dayCount = dtrow["Days"].ToString();
                details.Add(myobj);
            }
            return details.ToArray();
        }

Answer 3

At last i made very simple going to Ajax methods instead of calling from a webservice method.

Looks like if the return type of the webmethod is partialclass there is a problem.

Simplified my method with this and it started working :-)

 <script language="javascript" type="text/javascript">
       var days = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'];
       var months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

       //var dateSelected = $('input[id*="ff_Order_dFAsset_DeliveryDate"]');

        $(function Dailyweekly() {
            var options = '';
            for (var i = 0; i < days.length; i++) {
                options += '<option value="' + days[i] + '">' + days[i] + '</option>';
            }
            var Dropdownvalues = $('#' + '<%=this.ddlDayofMonth.ClientID%>');
            Dropdownvalues.append(options);
        });

        $(function monthly() {
            var options = '';
            for (var i = 0; i < months.length; i++) {
                options += '<option value="' + months[i] + '">' + months[i] + '</option>';
            }
            var Dropdownvalues = $('#' + '<%=this.ddlDayofMonth.ClientID%>');
            Dropdownvalues.append(options);
        });

        $(document).ready(function () {

            $('#' + '<%=this.Panel2.ClientID  %>').hide();

            $('#' + '<%=this.ddlTaskFrequency.ClientID  %>').change(function () {

                mydropdown = $('#' + '<%=this.ddlTaskFrequency.ClientID  %>').val();
                if (mydropdown == "Day's(at)") {
                    $('#' + '<%=this.Panel1.ClientID  %>').show();
                    $('#' + '<%=this.Panel2.ClientID  %>').hide();
                    var Dropdownvalues = $('#' + '<%=this.ddlDayofMonth.ClientID%>').empty();
                    Dailyweekly();
                }
                if (mydropdown == "Week's(at)") {
                    $('#' + '<%=this.Panel1.ClientID  %>').show();
                    $('#' + '<%=this.Panel2.ClientID  %>').hide();
                    var Dropdownvalues = $('#' + '<%=this.ddlDayofMonth.ClientID%>').empty();
                    Dailyweekly();
                }
                if (mydropdown == "Month's(at)") {
                    $('#' + '<%=this.Panel1.ClientID  %>').hide();
                    $('#' + '<%=this.Panel2.ClientID  %>').show();

                    var Dropdownvalues = $('#' + '<%=this.ddlDayofMonth.ClientID%>').empty();
                    monthly();
                }
                $('#' + '<%=this.lblNameChange.ClientID  %>').text($('#' + '<%=this.ddlTaskFrequency.ClientID  %>').val());
                return false;
            })
        });

    </script>