关于两层级联菜单的构想，同过jsp,jquery,ajax实现，适合刚入门的，可以看下

来源：互联网发布：linux dump命令编辑：程序博客网时间：2024/05/09 13:20

以下是我的JSp页面:

<!DOCTYPE html>
<html>
<head>
<title>test1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){

$("#s1").change(function(){
var pname=$("#s1").val();
if(pname!=""){
$.ajax({
url:"../deal.jsp", --------这里的地址是你数据源的地址
type:"get",
dataType:"json",
data:"pname="+pname,
beforeSend:function(data){
$("#loading").show();
},
success:function(result){
if(typeof result!="undefined"){
$("#s2").html("");
$(result).each(function(i){
$("#s2").append("<option>"+result[i].value+"</option>");
});
};
},
complete:function(){
$("#loading").hide(2000);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert("错误信息"+textStatus);
}
});
}});

});
</script>
</head>

<body>
<select name="pname" id="s1">
<option value="">请选择</option>
<option value="bj">北京市</option>
<option value="gd">广东省</option>
<option value="hb">河北省</option>
<option value="gx">广西省</option>
</select>
<select id="s2">
<option>请选择</option>
</select>
<span id="loading" style="display:none">loading...</span>
</body>
</html>

以下是ajax读取的数据源文件:

deal.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

String pname = request.getParameter("pname");
String json = "";
if( pname != null ){
if ( "bj".equals(pname) ){
json = "[{\"id\":1,\"value\":\"海淀区\"},{\"id\":2,\"value\":\"丰台区\"},{\"id\":3,\"value\":\"东城区\"},{\"id\":4,\"value\":\"房山区\"}]";
}else if( "gd".equals(pname) ){
json = "[{\"id\":1,\"value\":\"广州市\"},{\"id\":2,\"value\":\"深圳市\"},{\"id\":3,\"value\":\"中山市\"},{\"id\":4,\"value\":\"惠州市\"}]";
}else if( "hb".equals(pname) ){
json = "[{\"id\":1,\"value\":\"长沙市\"},{\"id\":2,\"value\":\"衡州市\"},{\"id\":3,\"value\":\"株洲市\"},{\"id\":4,\"value\":\"岳阳市\"}]";
}else if( "gx".equals(pname) ){
json = "[{\"id\":1,\"value\":\"南宁市\"},{\"id\":2,\"value\":\"桂林市\"},{\"id\":3,\"value\":\"柳州市\"},{\"id\":4,\"value\":\"北海市\"}]";
}
}
out.println(json);
%>

但其实真正应该从数据库中读数据，我也在尝试，如果弄好了会及时发给大家的

0 0