Asp.net jquery cascading dropdownlist

See more:

ASP.NET

Javascript

jQuery

C#3.5

Dear Code Project Team,

Please solve my code puzzle, i have tried a lot and don;t want to give up,

I have build cascading dropdownlist using asp.net jquery
Code for cascading dropdown is as follows,

My JSCRIPT

<script type="text/javascript">
     $(function () {
         $('#<%=ddlclassification2.ClientID %>').attr('disabled', 'disabled');
         $('#<%=ddlSubCategory.ClientID %>').attr('disabled', 'disabled');
         $('#<%=ddlclassification2.ClientID %>').append('<option selected="selected" value="0">Select Category</option>');
         $('#<%=ddlSubCategory.ClientID %>').empty().append('<option selected="selected" value="0">Select SubCategory</option>');

         $('#<%=ddlclassification1.ClientID %>').change(function () {
             var Entity = $('#<%=ddlclassification1.ClientID%>').val()
             $('#<%=ddlclassification2.ClientID %>').removeAttr("disabled");
             $('#<%=ddlSubCategory.ClientID %>').empty().append('<option selected="selected" value="0">Select SubCategory</option>');
             $('#<%=ddlSubCategory.ClientID %>').attr('disabled', 'disabled');
             $.ajax({
                 type: "POST",
                 url: "DigitalPrepping.aspx/BindCategory",
                 data: "{'Entity':'" + Entity + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (msg) {
                     var j = jQuery.parseJSON(msg.d);
                     var options;
                     for (var i = 0; i < j.length; i++) {
                         options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
                     }
                     $('#<%=ddlclassification2.ClientID %>').html(options)
                 },
                 error: function (data) {
                     alert('Something Went Wrong')
                 }
             });

         });
         $('#<%=ddlclassification2.ClientID %>').change(function () {
             var Category = $('#<%=ddlclassification2.ClientID%>').val()
             $('#<%=ddlSubCategory.ClientID %>').removeAttr("disabled");
             $.ajax({
                 type: "POST",
                 url: "DigitalPrepping.aspx/BindSubCategory",
                 data: "{'Category':'" + Category + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (msg) {
                     var j = jQuery.parseJSON(msg.d);
                     var options;
                     for (var i = 0; i < j.length; i++) {
                         options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
                     }
                     $('#<%=ddlSubCategory.ClientID %>').html(options)
                 },
                 error: function (data) {
                     alert('Something Went Wrong')
                 }
             });
         })
         $('#<%=rdlist.ClientID %> input').change(function () {
             // The one that fires the event is always the
             // checked one; you don't need to test for this

             var Data = $(this).val();
             $.each(Data.split(/\|/), function (i, val) {
                 if (i == 0) {
                     $('#<%=ddlclassification1.ClientID %>').val($.trim(val));

                 }
                 if (i == 1) {

                     $.ajax({
                         type: "POST",
                         url: "DigitalPrepping.aspx/BindSubCategory",
                         data: "{'Category':'" + Category + "'}",
                         contentType: "application/json; charset=utf-8",
                         dataType: "json",
                         success: function (msg) {
                             var j = jQuery.parseJSON(msg.d);
                             var options;
                             for (var i = 0; i < j.length; i++) {
                                 options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'
                             }
                             $('#<%=ddlSubCategory.ClientID %>').html(options)
                         },
                         error: function (data) {
                             alert('Something Went Wrong')
                         }
                     });

                     $('#<%=ddlclassification2.ClientID %>').val($.trim(val));

                 }
                 if (i == 2) {
                 }
             })

         });
     })
</script>

ASP.NET controls,

<tr>
    <td>
        <asp:Label ID="lblclassification1" Text="Classification" runat="server"></asp:Label>
    </td>
    <td>
        <asp:DropDownList ID="ddlclassification1" CausesValidation="true" runat="server"
            Width="170px" AutoPostBack="True" ValidationGroup="req" OnSelectedIndexChanged="ddlclassification1_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
</tr>
<tr>
    <td>
        <asp:Label ID="lblClassification2" Text="Category" runat="server"></asp:Label>
    </td>
    <td>
        <asp:DropDownList ID="ddlclassification2" CausesValidation="true" runat="server"
            Width="170px" AutoPostBack="True" ValidationGroup="req" OnSelectedIndexChanged="ddlclassification2_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
</tr>
<tr>
    <td>
        <asp:Label ID="lblClassification3" Text="SubCategory" runat="server"></asp:Label>
    </td>
    <td>
        <asp:DropDownList ID="ddlSubCategory" runat="server" Width="170px" OnSelectedIndexChanged="ddlSubCategory_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
    <td>
        <asp:Label ID="lblTypeTOSearch" runat="server" Text="Type to Search" Visible="False"></asp:Label>
    </td>
</tr>

C# code.

[WebMethod]
 public static string BindCategory(string Entity)
 {
     BAL_UploadVendorDocument b_up = new BAL_UploadVendorDocument();
     DataTable dt = b_up.GetClassification_2("ZI100115", Entity);

     StringWriter builder = new StringWriter();
     builder.WriteLine("[");
     if (dt.Rows.Count > 0)
     {
         builder.WriteLine("{\"optionDisplay\":\"Select Category\",");
         builder.WriteLine("\"optionValue\":\"0\"},");
         for (int i = 0; i <= dt.Rows.Count - 1; i++)
         {
             builder.WriteLine("{\"optionDisplay\":\"" + dt.Rows[i]["DocumentCategory_Value"] + "\",");
             builder.WriteLine("\"optionValue\":\"" + dt.Rows[i]["DocumentCategory_ID"] + "\"},");
         }
     }
     else
     {
         builder.WriteLine("{\"optionDisplay\":\"Select Category\",");
         builder.WriteLine("\"optionValue\":\"0\"},");
     }
     string returnjson = builder.ToString().Substring(0, builder.ToString().Length - 3);
     returnjson = returnjson + "]";
     return returnjson.Replace("\r", "").Replace("\n", "");
 }

 [WebMethod]
 public static string BindSubCategory(string Category)
 {
     BAL_UploadVendorDocument b_up = new BAL_UploadVendorDocument();
     DataTable dt = b_up.GetClassification_3("ZI100115", Category);

     StringWriter builder = new StringWriter();
     builder.WriteLine("[");
     if (dt.Rows.Count > 0)
     {
         builder.WriteLine("{\"optionDisplay\":\"Select SubCategory\",");
         builder.WriteLine("\"optionValue\":\"0\"},");
         for (int i = 0; i <= dt.Rows.Count - 1; i++)
         {
             builder.WriteLine("{\"optionDisplay\":\"" + dt.Rows[i]["SubCategory_Value"] + "\",");
             builder.WriteLine("\"optionValue\":\"" + dt.Rows[i]["SubCategory_ID"] + "\"},");
         }
     }
     else
     {
         builder.WriteLine("{\"optionDisplay\":\"Select SubCategory\",");
         builder.WriteLine("\"optionValue\":\"0\"},");
     }
     string returnjson = builder.ToString().Substring(0, builder.ToString().Length - 3);
     returnjson = returnjson + "]";
     return returnjson.Replace("\r", "").Replace("\n", "");
 }

my Cascading drop down works absolutely fine
ex: when i select classification1 it populates classification 2 & when i select Classification 2 it populates SubCategory list.


Problem:

I have classification suggestion radiobutton list
when i select suggestion it should auto populate classification 1, 2 & SubCategory list.

What I have tried:

When i select suggestion radiobutton list it should auto populate all three dropdown list by matching values.


$('#<%=rdlist.ClientID %> input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this

var Data = $(this).val();
$.each(Data.split(/\|/), function (i, val) {
if (i == 0) {
//below line works fine as classification 1 is populated on page load of my code
$('#<%=ddlclassification1.ClientID %>').val($.trim(val));
//It fires trigger and calls my classification1 change event and populates values in //classification 2 dropdown
$('#<%=ddlclassification1.ClientID %>').trigger('change');
}
if (i == 1) {
//Below line does not work
$('#<%=ddlclassification2.ClientID %>').val($.trim(val));

}
if (i == 2) {
}
})

});


I will appreciate if somebody could spend little time and solve this.
I am very frustrated.


Thanks & Regards,
Sunil mali