swapnali
I have four dropdown if i select first dd then only corresponding values must be there in 2nd dd,same with 3 and 4 and onchangfe it would not refresh the whole page.
January 12, 2011 at 11:50 AM
Hi Friend,
Try the following code:
1)country.jsp:
<%@page import="java.sql.*"%>
<html>
<head>
<script language="javascript" type="text/javascript">
var xmlHttp
var xmlHttp
function showState(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="state.jsp";
url +="?count=" +str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("state").innerHTML=xmlHttp.responseText
}
}
function showCity(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="city.jsp";
url +="?count=" +str;
xmlHttp.onreadystatechange = stateChange1;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange1(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("city").innerHTML=xmlHttp.responseText
}
}
</script>
</head>
<body>
<select name='country' onchange="showState(this.value)">
<option value="none">Select</option>
<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select * from country");
while(rs.next()){
%>
<option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>
<%
}
%>
</select>
<br>
<div id='state'>
<select name='state' >
<option value='-1'></option>
</select>
</div>
<div id='city'>
<select name='city' >
<option value='-1'></option>
</select>
</div>
</body>
</html>
January 12, 2011 at 11:54 AM
continue..
2)state.jsp:
<%@page import="java.sql.*"%>
<%
String country=request.getParameter("count");
String buffer="<select name='state' onchange='showCity(this.value);'><option value='-1'>Select</option>";
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select * from state where countryid='"+country+"' ");
while(rs.next()){
buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString(3)+"</option>";
}
buffer=buffer+"</select>";
response.getWriter().println(buffer);
}
catch(Exception e){
System.out.println(e);
}
%>
3)city.jsp:
<%@page import="java.sql.*"%>
<%
String state=request.getParameter("count");
String buffer="<select name='city'><option value='-1'>Select</option>";
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select * from city where stateid='"+state+"' ");
while(rs.next()){
buffer=buffer+"<option value='"+rs.getString(2)+"'>"+rs.getString(3)+"</option>";
}
buffer=buffer+"</select>";
response.getWriter().println(buffer);
}
catch(Exception e){
System.out.println(e);
}
%>
We have created 3 dependent dropdown. You can create the fourth one similarly.
For the above code, we have used 3 database tables:
1)country
CREATE TABLE `country` (
`countryid` bigint(255) NOT NULL auto_increment,
`countryname` varchar(255) default NULL,
PRIMARY KEY (`countryid`)
)
2)state
CREATE TABLE `state` (
`stateid` bigint(255) NOT NULL auto_increment,
`countryid` int(255) default NULL,
`state` varchar(255) default NULL,
PRIMARY KEY (`stateid`)
)
3)city
CREATE TABLE `city` (
`cityid` bigint(255) NOT NULL auto_increment,
`stateid` int(255) default NULL,
`city` varchar(255) default NULL,
PRIMARY KEY (`cityid`)
)
Thanks
January 13, 2011 at 10:48 AM
Thanks a lot for answer.It helped me a lot and its working.
January 13, 2011 at 5:03 PM
Can U provide the same code in form and table format. country city
state location
January 14, 2011 at 4:11 PM
Hi Friend,
Do changes in country.jsp:
<%@page import="java.sql.*"%>
<html>
<head>
<script language="javascript" type="text/javascript">
var xmlHttp
var xmlHttp
function showState(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="state.jsp";
url +="?count=" +str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("state").innerHTML=xmlHttp.responseText
}
}
function showCity(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert("Browser does not support XMLHTTP Request")
return;
}
var url="city.jsp";
url +="?count=" +str;
xmlHttp.onreadystatechange = stateChange1;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange1(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("city").innerHTML=xmlHttp.responseText
}
}
</script>
</head>
<body>
<table border="1">
<tr><th>Country</th><th>State</th><th>City</th></tr>
<tr><td>
<select name='country' onchange="showState(this.value)">
<option value="none">Select</option>
<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select * from country");
while(rs.next()){
%>
<option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>
<%
}
%>
</select>
</td>
<td id='state'><select name='state' >
<option value='-1'></option>
</select>
</td>
<td id='city'> <select name='city' >
<option value='-1'></option>
</select>
</td>
</tr>
</table>
</body>
</html>
Thanks
January 15, 2011 at 12:13 PM
Thanks for the help.It is working and satisfied my requirement.
February 15, 2011 at 3:40 PM
can you send me code for same problem using DWR..
March 13, 2013 at 12:01 AM
thanx for he code
October 31, 2011 at 11:11 AM
hai friends by using above code,i could display data dynamically in drop down list...
so far fine..
But problem is when i use to send those values to servlet,the values getting null..
Please provide solution
January 19, 2012 at 3:58 PM
Yuvan Karthik say's:
No worry frnd.. I think it's act as an Object There.. Better you can convert it as String Using "toString()" Function..
March 24, 2012 at 9:59 PM
Hi Sir!Can you please help me to write the code to display a table from the database based on the value selected from the combo box.I tried a lot.but its not working.pls Help!! :(
March 30, 2012 at 8:49 AM
can you provide code for the same code above, but it will add one option the has the value of "View All" then it will display all the content of all tables.
THANKS
April 15, 2012 at 2:09 PM
how to create for four.... and how to get id in related text box also......please reply soon
May 2, 2012 at 5:41 AM
sir. i have a problem in sending the values selected(i.e country, state, and city) to another JSP page... plz help me out... i Used the same code as provided above.. finding it difficult to get the parameters in another jsp page..!! urgent!!
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
