Ebay-like category selection menu

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

There can be many parent-child relationships. There can exists categories with four or more sub categories.
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.
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.

If you are using ASP.NET forms, have you considered using [AJAX Control Toolkit cascading dropdowns](http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx)? This would allow you to populate dropdowns from your server code, and would be particularly useful if you have your options stored in a database somewhere. — Zhihao, Jul 17 '12 at 20:15
I did think about it, but I don't really want to show 5 drop downs on the page initially. I think someone should be able to come in and choose to add something to maybe Coins US -> Dollars without ever seeing a select box for Morgan or 1897-98 If there was a way to hide the unused ones that might be interesting. — Andrew Walters, Jul 17 '12 at 20:20
I haven't tried it myself, but you may be able to change the `visibility` or `display` of the "next" dropdown from the client `onchange` event. As long as you're not performing any postback, the styling should not be lost. This may get messy in the future though since you'll be manipulating dropdowns through both JavaScript and WebMethod. — Zhihao, Jul 17 '12 at 21:08

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

I'm sure this has been asked before, however this is code for the Jquery part of your question.

 var numbers = [1, 2, 3, 4, 5];

for (i=0;i<numbers.length;i++){
   $('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items');
}

https://stackoverflow.com/a/3446086

The next part is an object composition problem, which can only really be answered if you give some insight to what you know about parent child relationships. How ebay does it may not help you, they might have needs that you do not.

edited May 23 '17 at 12:22

Community

1
1

answered Jul 17 '12 at 17:51

VoronoiPotato

3,113
20
30

Thanks, I'll update the original question to include the data format. this edit box isn't cooperating – Andrew Walters Jul 17 '12 at 18:21

score 0 · Accepted Answer · edited Jul 18 '12 at 03:05

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.

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.
On page load, call service to get first level of categories.
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()
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
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 :-)

Found some interesting libraries/examples this morning that do more of what I'm looking for. I'll look to try some out before I implement my own solution: http://tutorialzine.com/2011/11/chained-ajax-selects-jquery/ https://github.com/bombino/jquery-tree-select http://code.google.com/p/jquery-option-tree/ — Andrew Walters, Jul 18 '12 at 14:22
Ended up using this library (http://code.google.com/p/jquery-option-tree/) and modifying slightly to do what I want. — Andrew Walters, Jul 19 '12 at 12:33

score 0 · Answer 3 · answered Jul 18 '12 at 03:12

0

sounds like you want a drilldown menu. Here's a good one: http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

See the second and third examples.

answered Jul 18 '12 at 03:12

Matt

6,787
11
65
112

Hm, same functionality but different UI. Do you think those menus would work with the latest Jquery (1.7.1)? I see they released it for 1.3 – Andrew Walters Jul 18 '12 at 13:17

Ebay-like category selection menu

3 Answers3