0

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>
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/

0

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();
        }
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.