ajax list box in struts

[sharao]

hi
i need list of cities, when user select the agency....just like
if we select state in one list box, in another list box have to get list of cities to that particular state....

for that i did some process but little bit error plz follow the code...

actually i had one solution, in that iam placing retriving list of cities in other jsp and placing here....

but i want to place without using other jsp....by using document.getElementById...

agency.jsp

      <tr>
        <td><span style="color:red;">*</span>Agency:</td>
        <td align="left">
            <html:select property="lstAgencyId" name="SchedulingExeDTO" onchange="agencyCity(this.value)" tabindex="2" style="text-align:left; float:left; margin-left:10px; width:120px; border:solid 1px #09C;" >
                <html:option value="select">Select </html:option>
                <html:optionsCollection property="agencyList" value="agencyId" label="agencyName" name="SchedulingExeDTO"/> 
            </html:select>            
        </td>        
      </tr>
      <tr>
      <td><span style="color:red;">*</span>City Name:</td>
        <td><select id="lstAgencyCity">
        <option selected>--select--</option>
        </select>        

         </td>

in onchange of agency calling .js

proposal.js

function agencyCity(id)
{   
    var url='getCity.do';       
        new Ajax.Request(url, {method: 'get',parameters: {agencyId:id,param:'agency'},
                        onComplete: function(transport){                        
                    var response = transport.responseText;
                    alert(response)                 
                    var strar=response.split(",");

                    for(i=0;i<strar.length;i++){

                        if(i==0 && i==strar.length-1){                                              document.getElementById("lstAgencyCity").value=strar[i].substr(1,strar[i].length-2);
                        }else if(i==0){                     
                                                        document.getElementById("lstAgencyCity").value=strar[i].substr(1,strar[i].length);
                        }else if(i==strar.length-1){                                                    document.getElementById("lstAgencyCity").value=strar[i].substr(0,strar[i].length-2);
                        }else{                                  document.getElementById("lstAgencyCity").value=strar[i];
                        }               
                    }                   
                }
            }
        );      

}

in above .js file using prototype.js(third party script) iam running Ajax.Request()...it will call the action class and getting list of city names related to that agency...

here iam getting the all the city names but the list of city names not placed in the id(lstAgencyCity) in the agency.jsp?????
???????

thnx..

[Thirusha]

You will not see the options in the dropdown cause u have not written the "<option>" tag anywhere.

So in the loop where u loop thru the elements, u will have to use the createElement in javascript which looks like this:

var ele = document.getElementById("lstAgencyCity");
           var newOption=document.createElement("OPTION");
           newOption.value=selArray[i][0];
           newOption.text=selArray[i][1];
           ele.options.add(newOption);