📄 select.jsp
字号:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page language="java" import="java.util.*"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title></head><body>
<form name="form1">
<select name="select1" onchange="getLevel2()">
<option value="0">请选择一级分类：</option>
<%
List list = (List)request.getAttribute("list");
for(int i=0;i<list.size();i++)
{
%>
<option value=<%out.print(i+1);%>><%out.print(list.get(i));%></option>
<%
}
%>
</select>
<select name="select2">
<option value="0">请选择二级分类：</option>
</select>
</form> </body></html>
<script language="JavaScript" type="text/javascript">
<!--
//cache用于存储已经获取的数据
var cache=[];
function getLevel2(){
if(document.forms.form1.select1.selectedIndex==0){
//当一级菜单未选中时，二级菜单仅保留提示项
document.forms.form1.select2.length=1;
return;
}
//如果当前二级分类没有被缓存，则从服务器端获取
if(!cache[document.forms.form1.select1.selectedIndex]){
//建立跨浏览器的XMLHttpRequest对象
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
xmlhttp.onreadystatechange=function(){
//if(xmlhttp.readyState==1){
// alert("open方法被调用");
//}
//if(xmlhttp.readyState==2){
// alert("send方法被调用");
//}
//if(xmlhttp.readyState==3){
// alert("请求发送成功，正在接受数据");
//}
if(xmlhttp.readyState==4){
//alert("数据已经成功接受");
if(xmlhttp.status==200){
cache[document.forms.form1.select1.selectedIndex]=xmlhttp.responseText;
//获取成功后重新调用getLevel2，将数据填充到下拉框，如果直接在这里写会造成代码重复
getLevel2();
}else{
alert("网络失败。");
}
}
}
//创建请求
xmlhttp.open("get","ajaxTest.do?id="+document.forms.form1.select1.value);
xmlhttp.send(null);
//必须在这里返回，等待回调
return;
}
//此时已经确保缓存不为空
document.forms.form1.select2.length=1;
var _arr=cache[document.forms.form1.select1.selectedIndex];
var Data= _arr.split(",");
for(var i=0;i<Data.length-1;i+=2){
with(document.forms.form1.select2){
options[options.length]=new Option(Data[i+1],Data[i]);
}
}
}
//-->
</script>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -