Cascading dropdown in ASP.Net is not working fine - asp.net

Question

Hi - I know this sounds simple, but I am having trouble with some functionality to be achieved. Please refer the attached screen shot of the situation. This is what I am doing:
On page load I am loading the first drop down of Product / Service
BAsed on the selection of the Product dropdown I am populating the second dropdown "Category". I am making the database call to make this happen.
Based on the selection of the Category I am populating the third drop down of the price. I am making database call to get the information for this drop down.
Based on the selection of third (Price) dropdown, I am hiding / showing the panels.
Each dropdown is doing a post back to make the call to the datbase to get the details for the subsequent dropdown.
Everything seems to be working during first run, but the problem comes when I try a combination of the drop down. Following are the problems I am having:
Panel once rendered doesn't go away if I select different option from Dropdown1 and 2.
After subsequent run, the values are added up after each post back. For example if I have a product "Toy Car" in the product / service dropdown, it is now appearing twice and so on.
If the user selects the default option "Select Product", "Select Category" etc. The entire hierarchy should be reset. For example if the previous selection in the Product dropdown was "Toy Car", and now I select the default option "Select Product". It should reset "Category", Price and Panel visibility.
Please let me know how this can be done.
Thanks for the help.

Answer 1

On three DropDownLists
1 You set AutoPostBack="true"
2 You define OnSelectIndexChanged
<asp:dropdownlist id="ddl1" runa="server" Autopostback="true" onselectindexChanged="ddl1_selectindexChanged"/>
<asp:dropdownlist id="ddl2" runa="server" Autopostback="true" onselectindexChanged="ddl2_selectindexChanged"/>
<asp:dropdownlist id="ddl3" runa="server" Autopostback="true" onselectindexChanged="ddl3_selectindexChanged"/>
You must define page_load with this strategy
If(! IsPostBack)
{
//Bind dropdownlist
}
On each selectindexChanged, get value and execute selection in database, and bind your dropdownlist.
void ddl1_selectindexChanged(Object sender, EventArgs e)
{
//Get Selected Values
//For examlpe you can use SelectedValue property
var value1 = ddl1.SelectedValue;
//Request your database
//And bind your dropdownlist of sub categories
...
}
void ddl2_selectindexChanged(Object sender, EventArgs e) 
{
...
}
void ddl3_selectindexChanged(Object sender, EventArgs e)
{
..;
}

Answer 2

Do following things:
1) Second and Third dropdown should be disabled until user select the first drop down then enable second dropdown when user selects second dropdown then enable the third drop down.
2) On post back, Clear the Items in the DropDownList and them bind them with the datasource again. Simply create a function for each dropdown and call it on PostBack after clearing DropDownList by calling Clear method of dropdownlist.
3) To reset the entire hierarchy, Set the SeletecedIndex of all the dropdowns to Zero or -1;