What I'm making is a product selector where the product has multiple options. I'll add the code at the end if you need it because the code is getting long. I think there has to be a more elegant way to do this. Here is the basic process:

1. User searches for an item. The search returns a select box via getJSON.
2. User makes a selection. This selection returns up to 5 select boxes (call them 5-1,5-2,etc.) via getJSON.
3. User makes selection from 5-1 select box. Horizontal option 5-1-1 is returned (if exists) via getJSON. There is an unknown number of horizontal options that each depend on the horizontal option before it.
   
4. Same as step 3 with all 5 select boxes

I hope that makes sense. I said unknown number of horizontal options because I'm not sure how many, but I think it is max of 4. I don't think there is a way to get around the first two steps, but I'm looking for a way to use the same code each time to select the horizontal options. That is what I'm doing right now, but I have to copy the code inside each successive getJSON call. The PHP is set up to work the same for each horizontal option.

Here is an example of what the 5 select boxes look like:

1. <select class="small-input option" name="option4">
2.     <option value="none">Please Choose from Options Below</option>
3.     <option rel="" value="~">~&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Undecided FABRIC Option</option>
4.     <option rel="COLAR" value=".AR">.AR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FABRIC: Arch</option>
5.     <option rel="COLCE" value=".CE">.CE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FABRIC: Celestial</option>
6. </select>

And here is the code that begins at step 1 of my description above:

1. $("input[name='searchitems']").result(function(event,data,formatted) {
2.         var item = "item="+formatted+"&action=loadcatalogs";
3.         $.getJSON("projecteditor/search.php", item, function(data) {
4.             var result = data.catalogs;
5.             $("#catalogselection p").html(result);
6.            
7.             // when catalog is selected, add the select boxes for that value in searchitems
8.             $("select[name='catalogselection']").change(function() {
9.                 var item = $("input[name='searchitems']").val();
10.                 var catalog = $(this).val();
11.                 var lookup = "item="+item+"&catalog="+catalog+"&action=loaddata";
12.                 $.getJSON("projecteditor/search.php", lookup, function(data) {
13.                     $("#option0").html(data.option0);
14.                     $("#option1").html(data.option1);
15.                     $("#option2").html(data.option2);
16.                     $("#option3").html(data.option3);
17.                     $("#option4").html(data.option4);
18.                    
19.                     // see if there is a horizontal option. this is same code for every horizontal
    
20.                     $(".option").change(function() {
21.                         var option = $(this).val();
22.                         var upfieldset = $(this);
23.                         if ( option != "" ) {
24.                             var catalog = $("select[name='catalogselection']").val();
25.                             var nextoption = $(this).children("option:selected").attr("rel");
26.                             if ( nextoption != "" ) {
27.                                 var horizlookup = "nextoption="+nextoption+"&catalog="+catalog+"&action=findhorizontal";
28.                                 $.getJSON("projecteditor/search.php", horizlookup, function(data) {
29.                                     upfieldset.parent().parent().append(data.out);
30.                                    
31.                                 });
32.                             } // end of nextoption check
33.                         } // end of option check
34.                     }); // end of option.change
35.                 });
36.             });
37.         });
38.     });