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.