Member Avatar for jeff_00789

Hi, i want to know how to extract values from drop down box for processing in next field. In my file first drop down has list of countries taken from a database. I want to show location of that particular country in the other dropdown. The list of all locations is also in the same database. My code is as follows.

<html><body><form name="frm" method="post" action="update.jsp">


<b>COUNTRY:</b>&nbsp;</td>
<select name="coun" style="width: 246px" onChange ="this.frm2.submit();"  ><option value="">Select</option>
		<% 
			 sql = dbconn.prepareStatement("select * from T500L order by LTEXT ");
					results = sql.executeQuery();
					while(results.next()){
					String name = results.getString(2);
					String id   = results.getString(1);
					
		%><option value="<%= name %>">
		<% out.println(name); %>
		
		</option>
		<%} results.close(); sql.close(); %>
		</select>						
		
                  <b>LOCATION:</b>&nbsp;</td>
                <select name="loc" style="width: 246px"><option value="">Select</option></select>


</form>
</body>
</html>

could anyone please give me a solution.

  • 3 Contributors
  • 2 Replies
  • 211 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by manfosys

Dani AI

Generated

A cleaner, more maintainable approach is to have the country <select> hold the country ID as the option value, listen for its change event in JavaScript, then fetch the matching locations from the server and replace the location <select> contents — no full-page submit. This follows 's idea of passing the country id but uses the modern "change" event + AJAX. As noted, caching results in an ArrayList can work for tiny datasets, but avoid storing large lists in session memory; prefer server-side queries or a small client-side cache.

Example client-side (vanilla JS, modern browsers):

document.getElementById('country').addEventListener('change', function() {
  const cid = this.value;
  const loc = document.getElementById('location');
  if (!cid) { loc.innerHTML = '<option value="">Select</option>'; return; }
  fetch('/locations?countryId=' + encodeURIComponent(cid))
    .then(res => res.json())
    .then(list => {
      loc.innerHTML = '<option value="">Select</option>' +
        list.map(o => `<option value="${o.id}">${o.name}</option>`).join('');
    })
    .catch(e => {
      console.error('locations load failed', e);
      loc.innerHTML = '<option value="">Select</option>';
    });
});

Server-side (servlet/JSP): return JSON with id/name pairs and always use prepared statements and try-with-resources. Example SQL: SELECT id, name FROM locations WHERE country_id = ? ORDER BY name. Set response.setContentType("application/json; charset=UTF-8") and write a JSON array.

Troubleshooting notes: ensure the country select uses numeric/unique IDs (not display names) as value; verify the request URL and response in the browser Network tab; set correct charset and Content-Type; handle empty results with a default "Select" option; validate the incoming countryId server-side and use prepared statements to prevent injection. For legacy browsers, provide an XMLHttpRequest fallback or progressive enhancement.

Member Avatar for markenranosa

i have a suggestion create an arraylist,.. upon retrieving the values for the first dropown, store your needed values in the arraylistso that when you close the connection you can use arraylist in any possible ways that you want. Hope this helps.


Ken-Ken

Member Avatar for manfosys

hi,

Better u wil use onchange/onclick.In first dropdown box ,u wil use onclick javascript function when u select country.After u select a country ,the onclick javascript function wil cal.In that function u wil write code for retrieving corresponding location from db by pass the country id through the query string.

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.