Member Avatar for mimsc

Hi I want to populate my second drop-down menu based off of the value selected on my first drop down. Is there a function or a way of doin g this...

P.S my code is in a JSP:

<%
Vector theStates = WeatherDAO.getWeatherStates();
%>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>



<TR bgColor="#ffffff"><TD COLSPAN="2">
<TABLE CELLPADDING="3" CELLSPACING="2">
<TR><TD>

</FONT></CENTER><BR>
<BR>
<TABLE BORDER="0" CELLSPACING="5" CELLPADDING="5" WIDTH="100%">
<TR BGCOLOR="#C0C0C0" ><TD COLSPAN="2" ALIGN="CENTER"> <FONT SIZE=+3><B> Weather Services</B></FONT>
</TD></TR>
</TABLE>
<HR SIZE="3" NOSHADE>
<font size=+1>Select the State and City for which you would like to receive weather information.</font><br>
<TR><TD> 
<center>


<label for="weatherStat">State:</label>

<select name="weatherStat" id="States">
<% for (int i=0; i< theStates.size(); i++) {  %>

<OPTION VALUE=<%=theStates%>> <%=theStates.elementAt(i)%> </OPTION>

<% 
}
%>
</select>		

>


</TD></TR>
</center>
<TR><TD> 
<br>
<br>
<center>

<label for="weatherCity">City:</label>
	<select name="weatherCity" id="Cities">
<% 	

	
Vector theCities = WeatherDAO.getWeatherCities();// <<this is wher I need to pass the selected value

%>
<OPTION VALUE= </OPTION>

<% 
}
%>



						
</select></TD></TR>
  • 2 Contributors
  • 1 Reply
  • 72 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by tommybobby
Member Avatar for tommybobby

What you need to do the following:

1. Add the onchange event attribute to the 1st select tag

<select name="weatherStat" id="States" onchange="addNewValue();">

2. Create a javascript function called addNewValue for example.

Note: Place in the <head></head> tags

function addNewValue() {
     
     $('Cities').options[0] = new Option($('States').value, 0);

}

Ok, whats happening here, is that when an item is selected in your first select States, the onchange attribute event is fired, which in turn calls our addNewValue() javascript function. By the way, the $('Cities') notation is the same as document.getElementById.....


In the above example, for simplicity reasons ;), we are just adding the selected value to the first element of the Cities select box.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.