Question

I’m looking for some example code, if any exists to handle the scenario below.

I would like to make some cascading (filtering) selected boxes like ebay.com uses when you add a new item.

I’m having difficulties because

1. There can be many parent-child relationships. There can exists categories with four or more sub categories.
2. I’m not sure if I should add select boxes dynamically though jquery when someone clicks on a parent category, or have many hidden selected boxes on the page and hide/show as needed.
3. I’m sure I could look this up, but I’m not sure yet how to use form elements dynamically added though javascript in the code behind.

Does anyone know how eBay does it?

Data would be like this:

Coins US -> Dollars -> Morgan -> 1894-98

or

Stamps -> US -> Covers -> FDC -> 1931-1940

The data will be stored in a sql table with the structure:

Id | CategoryText | ParentId

Each level selected in the tree would result in a new select box to the right of it being generated with the available child values.

Answer 1

Looks like I’m posting my own answer to my first question.

Here’s a general outline of what I’m going to do, I haven’t coded it up yet but I spent the evening thinking though the solution and believe it will work.

1. De-normalize the data. Instead of having the data in the format of

   Id | CategoryText | ParentId

   I’ll store things as

   Id | CategoryTextLevel1 | CategoryTextLevel2 ect.

   I did some research and saw at this point in time ebay’s category structure only goes down six levels and that will work for me aswell I believe.

2. On page load, call service to get first level of categories.

3. Attach event handler to each select box item, not sure how I’ll do this yet but I think I might be able to just have one globally on option.click()

4. Select box items will be stored in the format <option id="x_y" value="y" where x is the level of category (1-6) and y is the category Id in the database

5. On Option click

   1. Loop though select boxes 1-6 and remove if id is greater then the index of the item we clicked on

   2. Loop through all selected options on the page. If we’re at a leaf node, enable save/continue button and show summary of selected category chain.

I still have some stuff to figure out like when/how to bind all the events in jquery but this is the basic outline I’ll use to code the page.

Also, even though I’m posting an answer. If anyone else has something similiar coded up on their site, feel free to post a link so I can compare with my implementation 🙂