I have successfully created a dynamic drop-down menu on my registration page by fetching countries from the database and then retrieving corresponding states based on the selected country.
Everything is functioning well, but I am facing a challenge in including an "OTHER" option at the end of the select dropdown.
Below is the code snippet responsible for displaying countries in Countries_States.jsp :
<tr>
<td>Country : </td>
<td>
<%
try {
MylistDAO dao = new MylistDAO();
ResultSet rs = dao.getCountries();
String ss;
%> <select id="combos" name="combos"
onChange="showcity(this.value);" onfocus="return(validCountry(this));">
<%
while (rs.next()) {
ss = rs.getString(2);
%>
<option value="<%=ss%>"><%=ss%></option>
<%
}
%>
</select> <%
} catch (Exception e) {
}
%>
</td>
</tr>
Below is the AJAX code snippet for fetching and displaying states based on selected countries:
function showcity(str) {
document.getElementById("states").length = 0;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "getCity.jsp?q=" + str, true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var xml = xmlhttp.responseXML;
var tags = xml.getElementsByTagName("tr");
for ( var i = 0; i < tags.length; i++) {
var combo = document.getElementById("states");
var option = document.createElement("option");
option.text = tags[i].childNodes[0].childNodes[0].nodeValue;
option.value = tags[i].childNodes[0].childNodes[0].nodeValue;
try {
combo.add(option, null); //Standard
} catch (error) {
combo.add(option); // IE only
}
}
};
xmlhttp.send();
}
Additionally, here is the getCity.jsp code to retrieve a list of states based on the selected country:
<%
String names = request.getParameter("q");
out.print(names);
try {
MylistDAO dao =new MylistDAO();
ResultSet rs = dao.getState(names);
String xml = "<table>";
while (rs.next()) {
xml += "<tr>";
xml += "<td>";
xml += rs.getString(1);
xml += "</td>";
xml += "</tr>";
}
xml += "</table>";
out.print(xml);
PrintWriter pw = response.getWriter();
response.setContentType("text/xml");
pw.write(xml);
pw.flush();
pw.close();
} catch (Exception e) {
}
%>
Lastly, here is a snippet of the DAO.java class responsible for fetching data from the database to populate the dropdown lists:
public class MylistDAO {
// Code to fetch country and state data from the database
}
To add an "OTHER" option in both the countries and states dropdown menus, you can modify the getCity.jsp as follows:
<%
String names = request.getParameter("q");
out.print(names);
try {
MylistDAO dao =new MylistDAO();
ResultSet rs = dao.getState(names);
String xml = "<table>";
while (rs.next()) {
xml += "<tr>";
xml += "<td>";
xml += rs.getString(1);
xml += "</td>";
xml += "</tr>";
}
xml += "<tr>";
xml += "<td>";
xml += "Other";
xml += "</td>";
xml += "</tr>";
xml += "</table>";
out.print(xml);
PrintWriter pw = response.getWriter();
response.setContentType("text/xml");
pw.write(xml);
pw.flush();
pw.close();
} catch (Exception e) {
}
%>
If you encounter any issues with this implementation, feel free to ask for further assistance. Remember, I am here to help! Good luck with your project!