dependent select list options

hi,
I have created a jsp page with box1 and box2 with box2 dependent on what is selected in box1. If US is chosen from box1 I want box2 to display a list of all states. i have stored all of the states in a vector but I can't seem to get them to read into box2. Can anyone take a look and see what I am doing wrong? I think it is syntax but not sure. Thanks!

<% 
// Connection
Vector regionList = new Vector();
admin.getRegion(regionList);
String regionString = " ";
 
for (int i = 0; i < regionList.size(); i++) {
String rString = regionList.get(i).toString();
regionString = regionString + rString.trim() ;
}
 
Vector stateList = new Vector();
admin.getState(stateList);
String stateString = " ";
                       
%>
<script language="javascript"> 
function setOptions(o,stateList) 
{ 
var i, j;
 
var select2 = document.geo.select2; 
select2.options.length = 0; 
 
if (o == "United States") 
{ 
for (i = 0; i < stateList.size(); i++) {
select2.options[j] = new Option(stateList[i][0]);
}
j++;
}
} 
</script> 
</head>
 
<body>
<form name="geo"> 
      
 <tr>
 
       <td><select size="10" id="availableOptions" name="availableOptions" onchange="setOptions(availableOptions.options[availableOptions.selectedIndex].value);"> >
       <%= regionString %>
       </select> </td> 
       
       <td>  <select multiple size="10" name="select2"> 
       <option></option> 
</select> </td>
          
       <td valign="top">
       <td class="tableimgcol" width="40" onClck="copySelected(availableOptions,selectedOptions)"><img src="/partnerDB/images/ArrowRightAdd.gif">
       <br><onClck="copyAll(availableOptions,selectedOptions)"><img src="/partnerDB/images/ArrowDoubleRight.gif">
        <br>                    
                       <br>
       <td class="tableimgcol" width="40" onClck="remSelected(selectedOptions,availableOptions)"><img src="/partnerDB/images/ArrowLeftRemove.gif">
       <br><onClck="remAll(selectedOptions,availableOptions)"><img src="/partnerDB/images/ArrowDoubleLeft.gif">
 
       </td>
 
       <td><select id="selectedOptions" name="selectedOptions" multiple size="10"> 
       <%=options.toString()%>
       </select></td>
      </tr>

Although this is a JSP, it seems to actually be a JavaScript question, so I'm going to move your question to our HTML and JavaScript forum.

Can anyone help me with this? I have tried everything I could think of but still can't seem to read the vector into the select options. Thanks!

How about you show me the code after your server side code has run.

Eric

Hi Eric,
Below is the entire code for this jsp page, nothing to fancy...

<% 
 
// Connection
 
Vector regionList = new Vector();
admin.getRegion(regionList);
String regionString = " ";
 
for (int i = 0; i < regionList.size(); i++) {
String rString = regionList.get(i).toString();
regionString = regionString + rString.trim() ;
}

Vector stateList = new Vector();
admin.getState(stateList);
String stateString = " ";
 
for (int i = 0; i < stateList.size(); i++) {
String sString = stateList.get(i).toString();
stateString = stateString + sString.trim() ;
}
 
Vector terrList = new Vector();
admin.getCanTerr(terrList);
String terrString = " ";
 
for (int i = 0; i < terrList.size(); i++) {
String tString = terrList.get(i).toString();
terrString = terrString + tString.trim() ;
}
 
                        
%>
<script language="javascript"> 
function setOptions(o,stateList) 
{ 
 
var select2 = document.geo.select2; 
select2.options.length = 0; 
 
if (o == "United States") 
{ 
   var i = 0;
   var minI = 0;
   var maxI = 5 - 1;
   
   for ( i = minI; i <= maxI; i++ ) {
    document.forms.geo.select2.options.options[ i ] = new Option
( "stateString", "stateString" );
   }
  }
 
if (o == "Canada") 
{ 
select2.options[select2.options.length] = new Option('<%=terrString%>'); 
} 
if (o == "3") 
{ 
select2.options[select2.options.length] = new Option('Chicken'); 
select2.options[select2.options.length] = new Option('Fish'); 
} 
} 
</script> 
</head>
 
<%
String pid = request.getParameter("partID");
%>
 
<body>
 
<form name="geo" action="/partnerDB/servlet/editGeoProfile" method="post" style="margin:0">
 
<%
 
StringBuffer options = new StringBuffer(); 
ResultSet rs = statement.executeQuery("Select partid, language from partDB.profile_lang "
      + "where partid = '" + pid + "' ");
      while (rs.next()) {  
      options.append("<option value=\"" + rs.getString("language").trim()  + "\">" + rs.getString("language").trim() + "</option>\n");
      }
      %>
      
 <tr>
 
       <td><select size="10" id="availableOptions" name="availableOptions" onchange="setOptions(availableOptions.options[availableOptions.selectedIndex].value);"> >
       <%= regionString %>
       </select> </td> 
       
       <td>  <select multiple size="10" name="select2"> 
       <option></option> 
</select> </td>
      </tr>
 
<% 
connection.close();
%> 
</form></body></html>

Okay, I got it to show the options on the screen but not in the right format, is there anyway to format these options in javascript? Here is the new piece of code

the output looks like <option value="AL">Alberta<option value="BC">British Columbia...

Can anyone help me?

okay, I have tried something new but am still not getting the right output can someone take a look? Thanks!

Can anyone help me with this? I have been trying everything for the last few days and can't seem to get this to work. I get close but not the right format...Please

Here is the source code I get, you see that everything is there just not the right format.

<script language="javascript">
function setOptions(o)
{

var select2 = document.geo.select2;
select2.options.length = 0;

if (o == "United States")
{
select2.options[select2.options.length] = new Option(' <option value="AL">Alabama<option value="AK">Alaska<option value="AZ">Arizona<option value="AR">Arkansas<option value="CA">California<option value="CO">Colorado<option value="CT">Connecticut<option value="DE">Delaware<option value="FL">Florida<option value="GA">Georgia<option value="HI">Hawaii<option value="ID">Idaho<option value="IL">Illinois<option value="IN">Indiana<option value="IA">Iowa<option value="KS">Kansas<option value="KY">Kentucky<option value="LA">Louisiana<option value="ME">Maine<option value="MD">Maryland<option value="MA">Massachusetts<option value="MI">Michigan<option value="MN">Minnesota<option value="MS">Mississippi<option value="MO">Missouri<option value="MT">Montana<option value="NA">National<option value="NE">Nebraska<option value="NV">Nevada<option value="NH">New Hampshire<option value="NJ">New Jersey<option value="NM">New Mexico<option value="NY">New York<option value="NC">North Carolina<option value="ND">North Dakota<option value="OH">Ohio<option value="OK">Oklahoma<option value="OR">Oregon<option value="PA">Pennsylvania<option value="RI">Rhode Island<option value="SC">South Carolina<option value="SD">South Dakota<option value="TN">Tennessee<option value="TX">Texas<option value="UT">Utah<option value="VT">Vermont<option value="VA">Virginia<option value="WA">Washington<option value="WV">West Virginia<option value="WI">Wisconsin<option value="WY">Wyoming');
}
if (o == "Canada")
{
select2.options[select2.options.length] = new Option(' <option value="AL">Alberta<option value="BC">British Columbia<option value="MN">Manitoba<option value="NW">NW Territory<option value="NA">National<option value="NB">New Brunswick<option value="NF">Newfoundland<option value="NS">Nova Scotia<option value="NU">Nunavut<option value="ON">Ontario<option value="PE">Prince Edward Island<option value="QE">Quebec<option value="SP">Saint Pierre & Miquelon<option value="SA">Saskatchewan<option value="YU">Yukon');
}
if (o == "3")
{
select2.options[select2.options.length] = new Option('Chicken');
select2.options[select2.options.length] = new Option('Fish');
}
}
</script>

Hi Brymer,

You may try this doing with the help of a Javascript rather than using vectors. Please follow the link for reference.
http://javascript.internet.com/forms/country.html

You may keep the values in another JS file from where you can retriev instead of taking it from the same page. This will be helpful if this is to be used in more than one place of your application.

Hope this will solve your problem