|
|
|
自己做了一份JSP版本的省市二级联动菜单,提供学习！
代码如下:
以下代码属于前台selectp.jsp页面：
<%@ page language="java" import="java.sql.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var xmlHttp;
//取xmlhttprequest对象
function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//处理省份id，selP是获取到的省份id
function selectCity(selP){
var cObj=document.getElementById('city');//取网页中id为city的容器对象
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert ("您的浏览器不支持AJAX！");
return false;
}
//判断确实选择到了省份值
if(selP!=''&&selP!=null&&selP!=0&&selP!=-1){
//将省份id值提交chkpc.jsp
xmlHttp.open('GET','chkpc.jsp?p='+selP,true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState!=4){
cObj.innerHTML= '<option value="loading">loading……</option>';
}
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//将从chkpc中获取到的输出值写入网页中id为city的对象容器
cObj.innerHTML=xmlHttp.responseText;
}
}
}
xmlHttp.send(null);
}
else{
cObj.innerHTML='';
//alert('请重新选择省份！');
return false;
}
}
</script>
<form action="#" method="post" name="myform">
<select name="pro" onChange="selectCity(this.options[this.selectedIndex].value);">
<option value="-1">请选择省份</option>
<%
Connection conn=null;
String sql=null;
Statement stmt=null;
ResultSet rs=null;
try
{
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/StuSys","root","123456");
stmt=conn.createStatement();
sql="select * from p";
rs=stmt.executeQuery(sql);
while(rs.next())
{
out.print("<option value=" + rs.getInt("id") + ">" + rs.getString("p") + "</option>");
}
}
catch(Exception e)
{
System.out.print("发生异常" + e.toString());
}
finally
{
if(rs!=null) rs.close();
if(stmt!=null) stmt.close();
if(conn!=null) conn.close();
}
%>
</select>
<span id="city"></span>
</form>
</body>
</html>
下面是后台chkpc.jsp的代码:
<%@ page language="java" import="java.sql.*" pageEncoding="utf-8"%>
<%
String p=request.getParameter("p");
Connection conn=null;
String sql=null;
Statement stmt=null;
ResultSet rs=null;
try
{
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/StuSys","root","123456");
stmt=conn.createStatement();
sql="select * from c where pid=" + Integer.parseInt(p);
rs=stmt.executeQuery(sql);
if(rs.next())
{
rs.beforeFirst();
out.print("<select name=\"city]\">");
while(rs.next())
{
out.print("<option value=" + rs.getInt("id") + ">" + rs.getString("c") + "</option>");
}
out.print("</select>");
}
else
{
out.print("<select name=\"city\"><option value=\"-1\">该省下暂无市级信息</option></select>");
}
}
catch(Exception e)
{
System.out.print("发生异常" + e.toString());
}
finally
{
if(rs!=null) rs.close();
if(stmt!=null) stmt.close();
if(conn!=null) conn.close();
}
%>
有些不懂的可以参考:《基于ajax的php版本的省市二级联动菜单实现》
以上代码可以直接复制运行，记得修改数据库名称，这里我另附程序中用到的两张表的SQL语句:
1、省份表p:
CREATE TABLE `p` (
`id` int(11) NOT NULL auto_increment,
`p` varchar(50) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=gbk;
-- ----------------------------
-- Records of p
-- ----------------------------
INSERT INTO `p` VALUES ('1', '江西');
INSERT INTO `p` VALUES ('2', '安徽');
INSERT INTO `p` VALUES ('3', '江苏');
1、市表c:
CREATE TABLE `c` (
`id` int(11) NOT NULL,
`pid` int(11) default NULL,
`c` varchar(50) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=gbk;
-- ----------------------------
-- Records of c
-- ----------------------------
INSERT INTO `c` VALUES ('1', '1', '南昌');
INSERT INTO `c` VALUES ('2', '1', '景德镇');
INSERT INTO `c` VALUES ('3', '1', '赣州');
INSERT INTO `c` VALUES ('4', '1', '宜春');
INSERT INTO `c` VALUES ('5', '1', '九江');
INSERT INTO `c` VALUES ('6', '2', '合肥');
INSERT INTO `c` VALUES ('7', '2', '芜湖');
INSERT INTO `c` VALUES ('8', '2', '黄山'); |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2011-10-10 17:34:16