JavaEE动态无刷新级联下拉框
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
脚本部分
<script type="text/javascript">
//初始化一级下拉框,iSelect为要初始化级联下拉框的组数，如果只有一组，则为1
function init(iSelect)
{
var i;
var j;
for(i=0;i<iSelect;i=i+1)
{
//selectName为二维数组，其中selectName[i][0]存放的是要初始化的一级下拉框的名字
{
var oOption = document.createElement("OPTION");
oOption.value=eval(selectName[i][num]+"[j]");
oOption.text=eval(selectName[i][num]+"[j+1]");
options.add(oOption);
if(boxTemp=="-1")
{
alert("此下拉框必选");
eval("document.forms[0]." + isNull[i]).focus();
return false;
}
}
return true;
｝
//-->
</script>
引用脚本页面的部分代码
<script type="text/javascript">
}
}
}
}
//判断必选下拉框是否已经选择，如不需要可以不调用，isNull[i]存放的是下拉框的名字
function isNullWithBox()
{
var i;
for(i=0;i<isNull.length;i=i+1)
{
var boxTemp = eval("document.forms[0]." + isNull[i]).value;
//必选下拉框数组，如果“ProvinceID”，也为必选，
//则var isNull=new Array("CountryID"，"ProvinceID");
var isNull=new Array("CountryID");
//定义存放数据库中各级下拉框中的内容的数组
var CountryID=new Array();
//-->
</SCRIPT>
AJAX实现的简单的无刷新效果，页添加到第二个下拉框列表里。代码如下：
<html>
<head>
<script type="text/javascript">
//Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉框内的列表
oOption.value="-1";
oOption.text="请选择";
options.add(oOption);
for(j=0;j<eval(selectName[i][num]+".length");j=j+3)
{
if(arrTemp==eval(selectName[i][num]+"[j+2]"))
xmlHttpRequest.onreadystatechange=callback; //将回调函数注册给状态改变事件
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function callback()
{
var dlCity=document.getElementById("city");
int j=3*i;//间隔为3
%>
<SCRIPT LANGUAGE="JavaScript">
//3的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
//3的倍数+2存放上一级ID，供下拉框匹配上一级使用
ProvinceID[<%=j%>]=["<%=tProvince.getProvinceid()%>"];
<SELECT name="CityID">
<OPTION value="-1">请选择</OPTION>
</SELECT>
</TD>
</tr>
<SCRIPT LANGUAGE="JavaScript">
<!--
//初始化一级下拉框,其中参数为要初始化级联下拉框的组数，如果有两组，则为2
init(1);
<!--
//selectName为二维数组，其中存放的是要各级下拉框的名字
//第一组级联下拉框selectName[0]，第二组级联下拉框selectName[1]
var selectName=new Array();
selectName[0]=new Array("CountryID","ProvinceID","CityID");
if(num<selectName[i].length)
{
with(eval("document.forms[0]."+selectName[i][num]))
{
length=0;
//首先给下一级下拉框赋初始值
var oOption = document.createElement("OPTION");
CountryID[<%=j+1%>]=["<%=tCountry.getCountryname()%>"];
</SCRIPT>
<%}
for(int i=0;i<alProvince.size();i++)
{
TProvince tProvince=(TProvince)alProvince.get(i);
{
//这里作者使用数据表对象
TCountry tCountry=(TCountry)alCountry.get(i);
int j=2*i;//间隔为2
%>
<SCRIPT LANGUAGE="JavaScript">
//2的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
CountryID[<%=j%>]=["<%=tCountry.getCountryid()%>"];
//根据浏览器的类型，创建xmlHttpRequest对象
function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if( window.XMLHttpRequest())
with(eval("this.document.forms[0]."+selectName[i][0]))
{
for(j=0;j<eval(selectName[i][0]+".length");j=j+2)
{
var oOption = document.createElement("OPTION");
{
TCity tCity=(TCity)alCity.get(i);
int j=3*i;//间隔为3
%>
<SCRIPT LANGUAGE="JavaScript">
//3的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
//3的倍数+2存放上一级ID，供下拉框匹配上一级使用
CityID[<%=j%>]=["<%=tCity.getCityid()%>"];
ProvinceID[<%=j+1%>]=["<%=tProvince.getProvincename()%>"];
ProvinceID[<%=j+2%>]=["<%=tProvince.getParentid()%>"];
</SCRIPT>
<%}
for(int i=0;i<alCity.size();i++)
var ProvinceID=new Array();
var CityID=new Array();
//-->
</script>
<%
//数据库传值，也可以是结果集，根据实际情况使用
ArrayList alCountry=(ArrayList)request.getAttribute("lCountry");
ArrayList alProvince=(ArrayList)request.getAttribute("lProvince");
ArrayList alCity=(ArrayList)request.getAttribute("lCity");
for(int i=0;i<alCountry.size();i++)
动态无刷新级联下拉框（无级限制）
前几天做级联下拉框，网上搜索了一下，挺多的，静态的居多，动态的也有，但遗憾的是没有找到我需要的。后来我自己写了一个脚本，实现了从数据库中取出数据，形成动态的下拉框，可以是无限级(因为实现方法是把页面的下拉框名称当作参数传递，因为同一页面相同名称的控件是不存在的，因此可以实现），当然这些可能无意义，现在就看三级下拉框。无刷新，是因为页面加载时把数据全部加载到了页面中；实现动态级联，是因为下级菜单与上级有某种关联（这是肯定的）。下面就说说其具体实现。
//请求被成功响应，已接收到结果
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
with(eval("document.forms[0]."+Sel[i][j]))
{
length=0;
var oOption = document.createElement("OPTION");
oOption.value="-1";
oOption.text="请选择";
options.add(oOption);
oOption.value=eval(selectName[i][0]+"[j]");
oOption.text=eval(selectName[i][0]+"[j+1]");
options.add(oOption);
}
}
}
}
//动态关联各级下拉框，boxName下拉框的名字，num下拉框的级别，
//比如国家，省，城市三级，则与省对应trendsSelect(ProvinceName,2)
<OPTION value="-1">请选择</OPTION>
</SELECT>
<SELECT name="ProvinceID" onchange="trendsSelect('ProvinceID',2)">
<OPTION value="-1">请选择</OPTION>
</SELECT>
}
}
}
}
var boxName=selectName[i][num];
//递归调用
trendsSelect(boxName,num+1);
}
}
}
//响应FORM中onreset事件;
function rt(iSelect)
{
var i;
for(i=0;i<iSelect;i=i+1)
{
for(j=1;j<selectName[i].length;j=j+1)
CityID[<%=j+1%>]=["<%=tCity.getCityname()%>"];
CityID[<%=j+2%>]=["<%=tCity.getProvinceid()%>"];
</SCRIPT>
<%}%>
<tr>
<TD align="right">请选择所在地区</TD>
<TD>
<SELECT name="CountryID" onchange="trendsSelect('CountryID',1)" >
{
return new XMLHttpRequest();
}
}
var xmlHttpRequest;
//异步响应函数
function search(para)
{
var url="/search?para="+para; //后台请求的路径
xmlHttpRequest=createXmlHttpRequest();
//确定为第几组下拉框
if(boxName==selectName[i][num-1])
{
with(eval("this.document.forms[0]."+selectName[i][num-1]))
{
arrTemp=options[options.selectedIndex].value;
}
function trendsSelect(boxName,num)
{
var i;
var length;
var j;
var arrTemp;
//selectName[i][num-1]存放的是“i”组菜单的“num”级下拉框的名字
for(i=0;i<selectName.length;i=i+1)
{
<script type="text/javascript">
//初始化一级下拉框,iSelect为要初始化级联下拉框的组数，如果只有一组，则为1
function init(iSelect)
{
var i;
var j;
for(i=0;i<iSelect;i=i+1)
{
//selectName为二维数组，其中selectName[i][0]存放的是要初始化的一级下拉框的名字
{
var oOption = document.createElement("OPTION");
oOption.value=eval(selectName[i][num]+"[j]");
oOption.text=eval(selectName[i][num]+"[j+1]");
options.add(oOption);
if(boxTemp=="-1")
{
alert("此下拉框必选");
eval("document.forms[0]." + isNull[i]).focus();
return false;
}
}
return true;
｝
//-->
</script>
引用脚本页面的部分代码
<script type="text/javascript">
}
}
}
}
//判断必选下拉框是否已经选择，如不需要可以不调用，isNull[i]存放的是下拉框的名字
function isNullWithBox()
{
var i;
for(i=0;i<isNull.length;i=i+1)
{
var boxTemp = eval("document.forms[0]." + isNull[i]).value;
//必选下拉框数组，如果“ProvinceID”，也为必选，
//则var isNull=new Array("CountryID"，"ProvinceID");
var isNull=new Array("CountryID");
//定义存放数据库中各级下拉框中的内容的数组
var CountryID=new Array();
//-->
</SCRIPT>
AJAX实现的简单的无刷新效果，页添加到第二个下拉框列表里。代码如下：
<html>
<head>
<script type="text/javascript">
//Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉框内的列表
oOption.value="-1";
oOption.text="请选择";
options.add(oOption);
for(j=0;j<eval(selectName[i][num]+".length");j=j+3)
{
if(arrTemp==eval(selectName[i][num]+"[j+2]"))
xmlHttpRequest.onreadystatechange=callback; //将回调函数注册给状态改变事件
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function callback()
{
var dlCity=document.getElementById("city");
int j=3*i;//间隔为3
%>
<SCRIPT LANGUAGE="JavaScript">
//3的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
//3的倍数+2存放上一级ID，供下拉框匹配上一级使用
ProvinceID[<%=j%>]=["<%=tProvince.getProvinceid()%>"];
<SELECT name="CityID">
<OPTION value="-1">请选择</OPTION>
</SELECT>
</TD>
</tr>
<SCRIPT LANGUAGE="JavaScript">
<!--
//初始化一级下拉框,其中参数为要初始化级联下拉框的组数，如果有两组，则为2
init(1);
<!--
//selectName为二维数组，其中存放的是要各级下拉框的名字
//第一组级联下拉框selectName[0]，第二组级联下拉框selectName[1]
var selectName=new Array();
selectName[0]=new Array("CountryID","ProvinceID","CityID");
if(num<selectName[i].length)
{
with(eval("document.forms[0]."+selectName[i][num]))
{
length=0;
//首先给下一级下拉框赋初始值
var oOption = document.createElement("OPTION");
CountryID[<%=j+1%>]=["<%=tCountry.getCountryname()%>"];
</SCRIPT>
<%}
for(int i=0;i<alProvince.size();i++)
{
TProvince tProvince=(TProvince)alProvince.get(i);
{
//这里作者使用数据表对象
TCountry tCountry=(TCountry)alCountry.get(i);
int j=2*i;//间隔为2
%>
<SCRIPT LANGUAGE="JavaScript">
//2的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
CountryID[<%=j%>]=["<%=tCountry.getCountryid()%>"];
//根据浏览器的类型，创建xmlHttpRequest对象
function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if( window.XMLHttpRequest())
with(eval("this.document.forms[0]."+selectName[i][0]))
{
for(j=0;j<eval(selectName[i][0]+".length");j=j+2)
{
var oOption = document.createElement("OPTION");
{
TCity tCity=(TCity)alCity.get(i);
int j=3*i;//间隔为3
%>
<SCRIPT LANGUAGE="JavaScript">
//3的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
//3的倍数+2存放上一级ID，供下拉框匹配上一级使用
CityID[<%=j%>]=["<%=tCity.getCityid()%>"];
ProvinceID[<%=j+1%>]=["<%=tProvince.getProvincename()%>"];
ProvinceID[<%=j+2%>]=["<%=tProvince.getParentid()%>"];
</SCRIPT>
<%}
for(int i=0;i<alCity.size();i++)
var ProvinceID=new Array();
var CityID=new Array();
//-->
</script>
<%
//数据库传值，也可以是结果集，根据实际情况使用
ArrayList alCountry=(ArrayList)request.getAttribute("lCountry");
ArrayList alProvince=(ArrayList)request.getAttribute("lProvince");
ArrayList alCity=(ArrayList)request.getAttribute("lCity");
for(int i=0;i<alCountry.size();i++)
动态无刷新级联下拉框（无级限制）
前几天做级联下拉框，网上搜索了一下，挺多的，静态的居多，动态的也有，但遗憾的是没有找到我需要的。后来我自己写了一个脚本，实现了从数据库中取出数据，形成动态的下拉框，可以是无限级(因为实现方法是把页面的下拉框名称当作参数传递，因为同一页面相同名称的控件是不存在的，因此可以实现），当然这些可能无意义，现在就看三级下拉框。无刷新，是因为页面加载时把数据全部加载到了页面中；实现动态级联，是因为下级菜单与上级有某种关联（这是肯定的）。下面就说说其具体实现。
//请求被成功响应，已接收到结果
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
with(eval("document.forms[0]."+Sel[i][j]))
{
length=0;
var oOption = document.createElement("OPTION");
oOption.value="-1";
oOption.text="请选择";
options.add(oOption);
oOption.value=eval(selectName[i][0]+"[j]");
oOption.text=eval(selectName[i][0]+"[j+1]");
options.add(oOption);
}
}
}
}
//动态关联各级下拉框，boxName下拉框的名字，num下拉框的级别，
//比如国家，省，城市三级，则与省对应trendsSelect(ProvinceName,2)
<OPTION value="-1">请选择</OPTION>
</SELECT>
<SELECT name="ProvinceID" onchange="trendsSelect('ProvinceID',2)">
<OPTION value="-1">请选择</OPTION>
</SELECT>
}
}
}
}
var boxName=selectName[i][num];
//递归调用
trendsSelect(boxName,num+1);
}
}
}
//响应FORM中onreset事件;
function rt(iSelect)
{
var i;
for(i=0;i<iSelect;i=i+1)
{
for(j=1;j<selectName[i].length;j=j+1)
CityID[<%=j+1%>]=["<%=tCity.getCityname()%>"];
CityID[<%=j+2%>]=["<%=tCity.getProvinceid()%>"];
</SCRIPT>
<%}%>
<tr>
<TD align="right">请选择所在地区</TD>
<TD>
<SELECT name="CountryID" onchange="trendsSelect('CountryID',1)" >
{
return new XMLHttpRequest();
}
}
var xmlHttpRequest;
//异步响应函数
function search(para)
{
var url="/search?para="+para; //后台请求的路径
xmlHttpRequest=createXmlHttpRequest();
//确定为第几组下拉框
if(boxName==selectName[i][num-1])
{
with(eval("this.document.forms[0]."+selectName[i][num-1]))
{
arrTemp=options[options.selectedIndex].value;
}
function trendsSelect(boxName,num)
{
var i;
var length;
var j;
var arrTemp;
//selectName[i][num-1]存放的是“i”组菜单的“num”级下拉框的名字
for(i=0;i<selectName.length;i=i+1)
{