Cascading dropdownlist jQuery does not retain value on post back.

Question

I have two html select server control on an add data form page. The user selects a value in the first html select server control and then values are populated into the second html select server control with jquery.

The problem is when a a user clicks the save button and the page posts back, the values are no longer in the drop down list populated by jQuery.

The drop downlist is a html server control, shouldn't it retain the values on post-back?

How can I retain the values and save the selected value to the database?

 $(document).ready(function() {
            $("#<%=ddlCourseWare.ClientID %>").change(function() {
                var courseWareId = this.value;

                try {

                    $.ajax({
                        type: "POST",
                        url: "Left_SubCategory.aspx/GetTabData",
                        data: "{courseWareId:" + courseWareId + "}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function(data) {
                            var result = json_parse(data.d);
                            $("#<%=ddlTabType.ClientID %>")[0].innerHTML = '';

                            if (result.length > 0) {
                                $.each(result, function(key, item) {
                                    $("#<%=ddlTabType.ClientID %>").append($("<option></option>").val(item.id).html(item.TabName));
                                });
                                                               }
                            else {

                                $("#<%=ddlTabType.ClientID %>").append($("<option></option>").val('0').html('--Select--'));
                                                               }

                        },
                        error: function(request, status, error) {
                            alert(request.responseText);
                        }


                    });
                }
                catch (ex) {
                    alert(ex);
                }

            });

        });


HTML

 <select id="ddlCourseWare" name="ddlCourseWare" runat="server" Width="230px" class="TextBox" Height="18px" >

 <select id="ddlTabType" name="ddlTabType" runat="server" Width="230px" class="TextBox" Height="18px" onchange="BindMainCat();">
     <option>--Select--</option>
 </select>

C#

 private void BindCourseWare()
        {
            ddlCourseWare.DataSource = courseWare.GetCourseWare();
            ddlCourseWare.DataTextField = "CourseWareType";
            ddlCourseWare.DataValueField = "id";
            ddlCourseWare.DataBind();
            ddlCourseWare.Items.Insert(0, "----Select Course Ware----");
        }

        [WebMethod]
        public static string GetTabData(int courseWareId)
        {
            var result = new CourseWare().GetCourseTabByCoursewareId(courseWareId);
            JavaScriptSerializer json_tabs = new JavaScriptSerializer();
            string jsonArray_tabs = json_tabs.Serialize(result);
            return jsonArray_tabs;
        }




protected void btnSave_Click(object sender, EventArgs e)
        {
            int mainCategoryID1 = int.Parse(ddlTabType.Value); // not working

int mainCategoryID2 = int.Parse(Request["ctl00$ContentPlaceHolder1$ddlTabType"]);
 // working but always return same value means the upper value (selected index 1) 
          } 

Answer 1

check this post for solution