Hi guys, I have 3 select boxes which has dependent relationship, the second box will show up depends on selection from first box, the third box will show up depends on second box, So far I can get second box showing up no problem, but not sure how I can get the third box working.

the second box and third box are created on the fly.

here is my code:
Code:
<script type="text/javascript" src="[% c.uri_for("/static/js/effects.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/controls.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/prototype.js") %]"></script>


<script type="text/javascript">

function getSubCat(PID) {
    var category = $(PID);
    var url = 'http://kewei-desktop:3000/admin/subcategories/category/' + category.value;
    var divIdName = "category_"+category.value+"_children";
   
    new Ajax.Request(url, { 
          method: 'post',
          onSuccess: function(transport) {
              var response = transport.responseText;
              var tmp1 = document.createElement("div");
              tmp1.setAttribute("class", "SubCategory");
              tmp1.setAttribute("id", divIdName);
              tmp1.innerHTML = response;
              if ( response.length > 4 ) {              
                  tmp1.innerHTML = response;
                  $("linkInfo").removeChild($("linkInfo").lastChild);    
                  $("linkInfo").appendChild(tmp1);
              }
              else {
                  $("linkInfo").removeChild($("linkInfo").lastChild);
                  $("linkInfo").appendChild(tmp1);
              }
          }
        }
    )
}

</script>
Can anyone give me hints? Thanks in advance