Dynamic Select Boxes

I need to have two select boxes. One with a major category, and once selected another one appears with sub categories.

For sake of example, say I have 8 major categories.

At first, I thought I’d just make 8 selects with the sub categories, and just hide/show the ones I didn’t need or need. Fine .. but the form still sees them when you submit! so my subcategory name was getting overwritten by the hidden selects. No good.

I load my data into a javascript array, so I do the dyamic thing where I loop through the array and add options to the DOM. Fine .. works.

something like:

for (s in data) {
label = "       "+data[s][1];
$(’sub_cat_select’).options[i] = new Option(label, data[s][0]);
i++;
}

But — my subcategoris are actually “tree like” and there are sub categories. With my hidden selects, in php I added & nbsp ; to create an “indent” which showed up fine. However, usin the dom, my & nbsp didn’t work.. and neither did putting a real space.

I just find it weird that if I used php to print my option lists with the & nbsp … it worked.. but then putting the & nbsp when doing the dom way it didn’t work. Any suggestions on how to indent? next I am trying style sheets, but I think that will be a bit of a pain.

2 Comments »

  1. Keith Casey Said,

    September 15, 2006 @ 8:51 am

    Hmm… I didn’t realize that the DOM methods didn’t like nbsp’s.

    Alternatively, you could use dashes to denote how deep a given subcat was. This not only provides the indenting but makes the depth clear no matter how little attention th user is paying.

  2. nate Said,

    October 8, 2006 @ 9:11 pm

    How exactly are you adding the options now? If I create a new Option object and set its text and value, I can’t use the & nbsp. However — if I create the Option, set the value and then the innerHTML property, the & nbsp works. Haven’t tested everywhere, but it’s worth a shot…

RSS feed for comments on this post · TrackBack URI

Leave a Comment