• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 351
  • Last Modified:

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!
0
franco32
Asked:
franco32
1 Solution
 
wranlonCommented:
Do you have the id specified correctly?  From your HTML, the id is "detail", and in your script you are looking for "selection".
0
 
franco32Author Commented:
Not sure I understand your question, but basically each of the 4 list box values is dependent on the user selection of the prior one.
(e.g).
CATEGORY   AREA    SECTION   DETAIL
 CAT1           AREAx
                    AREAy
                    AREA1    Section3
                                 Section3a
                                 Section3b   detailb


Once the user selects CAT1 from category, AREAx,AREAy,AREA1 are displayed in the next <select>. If the user selects AREA1, Section3,Section3a,Section3b is displayed in the next <select>. The problem is that of the user selects Section3b,nothing is displayed in the DETAIL <select>. Not sure why?? I'm following the same javascript code, just different <id>.
Hope I clarified that.
Thanks.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now