QuestionAsk Questions?
krishnachaitanya
My requirement is as follows suppose combobox to select country whenever i select a country it will show corresponding states in another combo box.
View Answers
October 19, 2011 at 11:42 AM
JSP 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
}
}
</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>
</body>
</html>
October 19, 2011 at 11:43 AM
continue..
2)state.jsp:
<%@page import="java.sql.*"%>
<%
String country=request.getParameter("count");
String buffer="<select name='state'><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) For the above code, we have used 2 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`)
)
October 19, 2011 at 11:49 AM
<html>
ComboBox
<script language="javascript">
var arr = new Array();
arr[0] = new Array("-select-");
arr[1] = new Array("Maharashtra","Karnataka","Andhra Pradesh","Tamil Nadu");
arr[2] = new Array("Carinthia"," Styria");
arr[3] = new Array("Florida","New York","Maryland");
arr[4] = new Array("Queensland","Victoria","Tasmania","New South Wales");
function change(combo1){
var comboValue = combo1.value;
document.forms["form"].elements["combo2"].options.length=0;
for (var i=0;i<arr[comboValue].length;i++){
var option = document.createElement("option");
option.setAttribute('value',i+1);
option.innerHTML = arr[comboValue][i];
document.forms["form"].elements["combo2"].appendChild(option);
}
}
</script>
<form name="form" method="post"><select name="combo1" onchange="change(this);">
<option value="0">-Select-</option>
<option value="1">India</option>
<option value="2">Austria</option>
<option value="3">USA</option>
<option value="4">Australia</option>
</option>
</select><br />
<select name="combo2">
</select>
</form>
</html>
October 19, 2011 at 12:05 PM
Code in HTML
<html>
<h2>ComboBox</h2>
<script language="javascript">
var arr = new Array();
arr[0] = new Array("-select-");
arr[1] = new Array("Maharashtra","Karnataka","Kerela","Rajashthan");
arr[2] = new Array("Texas","New York","Florida","California");
function change(combo1)
{
var comboValue = combo1.value;
document.forms["form"].elements["combo2"].options.length=0;
for (var i=0;i<arr[comboValue].length;i++)
{
var option = document.createElement("option");
option.setAttribute('value',i+1);
option.innerHTML = arr[comboValue][i];
document.forms["form"].elements["combo2"].appendChild(option);
}
}
</script>
<form name="form" method="post">
<select name="combo1" onchange="change(this);">
<option value="0">-Select-</option>
<option value="1">India</option>
<option value="2">USA</option>
</option>
</select><br />
<select name="combo2">
</select>
</form>
</html>
Related Pages:
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.
Tutorial Topics
