How to set the value of a drop down list based on some dynamically selected value using Javascript?

I have to design a form in which the values of one 开发者_开发百科drop down list will be altered dynamically based on the value selected in another drop down list using JavaScript.

The first list is for city and second is for country. So for example if I select Chennai as my city, then automatically the state should be Tamil Nadu. But before I make any selection of the city, I should be able to view the entire list of the states.

I have written the following code for city:

<select name='city' onchange="showState(this.value);">  
<option value="none">Select</option>  
<%try{ %>
<%
Class.forName("com.pointbase.jdbc.jdbcUniversalDriver");
Connection con = DriverManager.getConnection("jdbc:pointbase:server://localhost:9092/demo", "PBPUBLIC", "PBPUBLIC");
Statement stmt = con.createStatement();  
ResultSet rs = stmt.executeQuery("Select * from PBPUBLIC.PLACE");
while(rs.next()){
%>
<option value="<%=rs.getString("CITY")%>"><%=rs.getString("CITY")%></option>  
<%
}
%>
<% } catch(Exception e){ %>
<% } %>
</select>

and a similar one for state.

Please help me out with the code that I should write inside the function setState(str) as I am unable to get a code that works correctly.

Assuming you are passing the state name as "str" to the setState(str) method, you can add this to the body of the setState(str) method.

$("#state").val(str);

A complete jQuery example is available here