How to populate second combo box on the basis of first combo

Question

Hi All,
Please help me on populating the second combo on the basis of the selected value from first combo.
The values will come from database.
I am using struts and jsp in JBOSS
Regards,
Dinesh

Answer 1

Here's a snippet from one of my jsp's:
        TestDel del = new TestDel();
     String groups = del.getTestGroupsAsHTMLSelect(
                      model.getSponsorId(),
                      "groupCode",            //field name
                      null != values ? (String)values.get("groupCode") : "",                      // selected
                      "findTestTypes"); // on change       
       String tests = del.getTestsAsHTMLSelect(
                      null != values ? (String)values.get("groupCode") : "",
                      "test_code",
                      null != values ? (String)values.get("test_code") :"",
                      "findSchoolType");It basically returns a select box with the on change attribute set to do what your other reply was talking about. Using AJAX to retrieve the data and then pop it into the page...
I did find that that with mozilla there was some refreshing issue so here's some javascript help:
function findTestTypes(grp){
  var url = "/tests/lookup?cmd=test&gc="+grp.value;
     if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            req = new ActiveXObject("Microsoft.XMLHTTP");
     req.open("GET", url, true);
     req.onreadystatechange = showTestTypes;
     req.send(null); 
function showTestTypes(){
     if (req.readyState == 4 && req.status == 200) {
         var html = req.responseText;
         var tt = getItem("tests");
         tt.innerHTML = html;
         fireChangeEvent("test_code");
// for mozilla
function fireChangeEvent(fieldName){
         if (window.ActiveXObject) {
              getItem(fieldName).fireEvent('onchange');
         }else{
                 // target is some DOM node on which you wish to fire an event.
               var target = getItem(fieldName);
               var oEvent = document.createEvent( "Events" );
               oEvent.initEvent(
                 "change",    // the type of mouse event
                 true,       // do you want the event to
                             // bubble up through the tree?  (sure)
                 true,       // can the default action for this
                             // event, on this element, be cancelled? (yep)
                 window,     // the 'AbstractView' for this event,
                             // which I took to mean the thing sourcing
                             // the mouse input.  Either way, this is
                             // the only value I passed that would work
                 1,          // details -- for 'click' type events, this
                             // contains the number of clicks. (single click here)
                 1,          // screenXArg - I just stuck 1 in cos I
                             // really didn't care
                 1,          // screenYArg - ditto
                 1,          // clientXArg - ditto
                 1,          // clientYArg - ditto
                 false,      // is ctrl key depressed?
                 false,      // is alt key depressed?
                 false,      // is shift key depressed?
                 false,      // is meta key depressed?
                 0,          // which button is involved?
                             // I believe that 0 = left, 1 = right,
                             // 2 = middle
                 target           // the originator of the event
                             // if you wanted to simulate a child
                             // element firing the event you'd put
                             // its handle here, and call this method
                             // on the parent catcher.  In this case,
                             // they are one and the same.
               target.dispatchEvent( oEvent );        
}