Cascading dropdownlist jQuery does not retain value on post back.
- by John Smith
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)
}
