Using AJAX to auto-load 4 <select> boxes

I've implemented AJAX to auto-load 4 different <select> tags. The 1st 3 work fine, but failing on the 4th.

I have the following in my JSP page:

<td>
  <select id="cat" id="cat" onChange="loadarea(this.selectedIndex);">
  <option></option>
</td>


<td>
  <select id="area" id="area" onChange="loadsection(this.selectedIndex);">
  <option></option>
</td>

<td>
  <select id="section" id="section" onChange="loaddetail(this.selectedIndex);">
  <option></option>
</td>

<td>
  <select id="detail" id="detail" >
  <option></option>
</td>


The loadarea, loadsection and loaddetail are pretty much the same. I'm simply pulling the user selected data and passing that to the servlet to get the data to preload the appropriate <select> boxes.

The AJAX works great on loading the "AREA" and "Section" tags, but failing on the "Detail". I've verified the servlet that fetches the detail data works fine.
The javascript function "loaddetail looks like:

var area1;
var section1;
var cat1;
function loaddetail(i)
{
  section1 = document.getElementById("selection");
  var url="SelectDetail?cat=" + cat1.value + "&area-" + area1.value + "&section=" + escape(section1.options[i].text);
NOTE: The value "area1" is "false". Not sure why, so subsequently the servlet "SelectDetail" does not return any data.
}

I can provide more details if necessary. Just puzzled why the pre-load of the 4th text box fails.
Thanks!