Advertisement

Dynamic dependent drop down list with ajax-Jsp and Servlet & My SQL Database

Dynamic dependent drop down list with ajax-Jsp and Servlet & My SQL Database
Dynamic dependent drop down list with ajax-Jsp and Servlet & My SQL Database

Dynamic dependent drop down list with ajax-Jsp

Here are the steps you need to take advantage of AJAX, JSP & Servlet, and a MySQL database to generate a dependant drop-down menu.

Make a table in your database to hold the information for the menus. The country ID and name could be stored in separate columns in a table labelled “countries,” while the city ID, name, and country ID would all be stored in separate columns in a table labelled “cities” (which will be used to link each city to its corresponding country).

Make a JSP page with the code for the two select boxes. The list of countries should appear in the first drop-down menu, while the second menu item will be blank at first.

Make a Servlet to deal with the AJAX request made when a user chooses a country from the first select box. The selected country ID is read by the Servlet, which then performs a database query to return a list of cities for the selected country and returns the result as a JSON object.

When the user selects a country from the first select box, JavaScript should send an AJAX request to the Servlet. The JSON object containing the list of cities should be parsed using JavaScript as soon as the response is received, and the resulting list should be used to fill out the second select box.

Here is a sample of how to put the above instructions into practise.

  1. Database Tables

CREATE TABLE countries (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL,
PRIMARY KEY (id)
);

CREATE TABLE cities (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL,
country_id INT(11) NOT NULL,
PRIMARY KEY (id),
FOREIGN KEY (country_id) REFERENCES countries(id)
);

  1. JSP Page

<html>
<head>
<title>Dynamic Dependent Drop Down List</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script>
$(document).ready(function() {
$(‘#country’).change(function() {
var countryId = $(this).val();
$.ajax({
type: ‘POST’,
url: ‘CityServlet’,
data: { countryId: countryId },
success: function(response) {
$(‘#city’).html(response);
}
});
});
});
</script>
</head>
<body>
<h1>Dynamic Dependent Drop Down List</h1>
<label>Country:</label>
<select id=”country”>
<option value=””>–Select Country–</option>
<%– Get list of countries from database –%>
<%
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
Class.forName(“com.mysql.jdbc.Driver”);
conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/mydatabase”, “username”, “password”);
stmt = conn.createStatement();
rs = stmt.executeQuery(“SELECT id, name FROM countries ORDER BY name”);
while (rs.next()) {
int id = rs.getInt(“id”);
String name = rs.getString(“name”);
out.println(“<option value=”” + id + “”>” + name + “</option>”);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try { rs.close(); } catch (Exception e) { /* ignored */ }
try { stmt.close(); } catch (Exception e) { /* ignored */ }
try { conn.close(); } catch (Exception e) { /* ignored */ }
}
%>
</select>
<br><br>
<label>City:</label>
<select

 

Download Any Jobs Application Form For 500 +
Download Jobs Application Form For Every Jobs
Resume Templates Top 20 in MS Word – CV Format

Disclaimer Confirm everything before applying for a job or giving an advance to a similar officer. We are not responsible for any damage or loss.

About Ghulam Murtaza

Ghulam Murtaza from okara Punjab Pakistan. I have Book Depot & Photo State Shop and provide today's latest career opportunities in private and Govt departments. View all Government jobs collected from daily Pakistani newspapers to apply online. Murtazaweb.com is a recruitment website for employment ads.

View all posts by Ghulam Murtaza →

Leave a Reply

Your email address will not be published. Required fields are marked *