-1

I'm trying to build a category organizer for my website. Radio buttons can get out of hand fast and select/option buttons aren't easily seen. So I found this type of category organizer and I was wondering what coding languages make it happen.

It's almost as if they put an open select/option function inside of a box and gave that box a max height.

Any help is greatly appreciated.

![category organizer photo](http://imageshack.us/a/img268/8307/5d3v.png)

mfluehr
  • 2,832
  • 2
  • 23
  • 31
Trevor Wood
  • 2,347
  • 5
  • 31
  • 56
  • HTML and JavaScript, of course. :P You might have some server-side language toprovide the data to populate the boxes, but that's not mandatory -- you could have the data entirely within a JS array. – cHao Jan 04 '14 at 19:25
  • Dupe of http://stackoverflow.com/questions/15696415/html-multiple-select-box? – Albert Xing Jan 04 '14 at 19:25
  • "It's almost as if they put an open select/option function inside of a box and gave that box a max height." That's probably *exactly what they did*. – Chris Hayes Jan 04 '14 at 19:25
  • Terms that would help you search are "cascading dropdown" http://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery – Digital Chris Jan 04 '14 at 19:28
  • Of course this question just HAD to be put on hold as I was writing up a JSFiddle to give an idea of how to go about building it. So, what the heck.. Here it is. http://jsfiddle.net/zxLrD/ – Stephen Jan 04 '14 at 20:19

3 Answers3

2

You can easily do this with AJAX and three <select> boxes. You add an onchange event to the first one and the second one that passes the value and returns what the next box's values should be. It's one of the oldest reasons to use AJAX.

Machavity
  • 30,841
  • 27
  • 92
  • 100
  • 2
    Heck, you don't even have to use ajax - plain JSON would work just as well. – Stephen Jan 04 '14 at 19:26
  • That's a good point. And I probably should note that you can style so many things with CSS3 that they no longer look like their older HTML selves. – Machavity Jan 04 '14 at 19:27
1

The key HTML element here would be a <select multiple>, which creates one of the three lists in the screenshot.

Add in some JS to dynamically load the options based on previous selections, and you'll get a structured selection box.

Albert Xing
  • 5,620
  • 3
  • 21
  • 40
-1

Look into jQuery and jQuery UI. They help make many controls/widgets that users are accustomed to on the desktop function well in web pages.

http://jquery.com/

http://jqueryui.com/

Darkstar4386
  • 26
  • 1