Using AJAX to auto-load 4 <select> boxes

Posted on 2006-06-08
Last Modified: 2010-05-18
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:

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

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

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

  <select id="detail" id="detail" >

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.
Question by:franco32
    LVL 5

    Accepted Solution

    Do you have the id specified correctly?  From your HTML, the id is "detail", and in your script you are looking for "selection".

    Author Comment

    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.
     CAT1           AREAx
                        AREA1    Section3
                                     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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Both Easy and Powerful How easy is PHP? (  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now