js三级滚动条
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="javascript">
var areaArray = new Array();
areaArray[areaArray.length]=new Array("1","杭州");
areaArray[areaArray.length]=new Array("2","湖州");
areaArray[areaArray.length]=new Array("3","温州");
var townArray = new Array();
townArray[townArray.length]=new Array("1","1","上城区");
townArray[townArray.length]=new Array("1","2","下城区");
townArray[townArray.length]=new Array("2","3","南浔镇");
townArray[townArray.length]=new Array("2","4","菱湖镇");
townArray[townArray.length]=new Array("3","5","乐清");
townArray[townArray.length]=new Array("3","6","苍南");
function setTown(obj1ID,obj2ID){
var objArea = document.getElementById(obj1ID);
var objTown = document.getElementById(obj2ID);
var i;
var itemArray = null;
if(objArea.value.length > 0){
itemArray = new Array();
for(i=0; i<townArray.length; i++){
if(townArray[i][0] == objArea.value){
itemArray[itemArray.length] = new Array(townArray[i][1],townArray[i][2]);
}
}
}
for(i=objTown.options.length; i>=0; i--){
objTown.options[i] = null;
}
objTown.options[0] = new Option("请选地区");
objTown.options[0].value = "";
if(itemArray != null){
for(i=0; i<itemArray.length; i++){
objTown.options[i+1] = new Option(itemArray[i][1]);
if(itemArray[i][0] != null){
objTown.options[i].value = itemArray[i][0];
}
}
}
}
/** ------------------------------------------------------------------------------------------------ */
var oneArray = new Array();
oneArray[oneArray.length]=new Array("1","1");
oneArray[oneArray.length]=new Array("2","2");
oneArray[oneArray.length]=new Array("3","3");
var twoArray = new Array();
twoArray[twoArray.length]=new Array("1","11","11");
twoArray[twoArray.length]=new Array("1","12","12");
twoArray[twoArray.length]=new Array("1","13","13");
twoArray[twoArray.length]=new Array("2","21","21");
twoArray[twoArray.length]=new Array("2","22","22");
twoArray[twoArray.length]=new Array("3","31","31");
twoArray[twoArray.length]=new Array("3","32","32");
twoArray[twoArray.length]=new Array("3","33","33");
var threeArray = new Array();
threeArray[threeArray.length]=new Array("11","111","111");
threeArray[threeArray.length]=new Array("11","112","112");
threeArray[threeArray.length]=new Array("11","113","113");
threeArray[threeArray.length]=new Array("12","121","121");
threeArray[threeArray.length]=new Array("12","122","122");
threeArray[threeArray.length]=new Array("13","131","131");
threeArray[threeArray.length]=new Array("13","132","132");
threeArray[threeArray.length]=new Array("21","211","211");
threeArray[threeArray.length]=new Array("21","212","212");
threeArray[threeArray.length]=new Array("22","221","221");
threeArray[threeArray.length]=new Array("22","222","222");
threeArray[threeArray.length]=new Array("31","311","311");
threeArray[threeArray.length]=new Array("31","312","312");
threeArray[threeArray.length]=new Array("32","321","321");
threeArray[threeArray.length]=new Array("32","322","322");
threeArray[threeArray.length]=new Array("33","331","331");
threeArray[threeArray.length]=new Array("33","332","332");
function setTwo(obj1ID,obj2ID,obj3ID){
var objOne = document.getElementById(obj1ID);
var objTwo = document.getElementById(obj2ID);
var objThree = document.getElementById(obj3ID);
var i;
var twoArrays = null;
if(objOne.value.length > 0){
twoArrays = new Array();
for(i=0;i<twoArray.length;i++){
if(twoArray[i][0]==objOne.value){
twoArrays[twoArrays.length]=new Array(twoArray[i][1],twoArray[i][2]);
}
}
}
for(i=objTwo.options.length; i>=0; i--){
objTwo.options[i] = null;
}
objTwo.options[0] = new Option("请选择");
objTwo.options[0].value = "";
for(i=objThree.options.length; i>=0; i--){
objThree.options[i] = null;
}
objThree.options[0] = new Option("请选择");
objThree.options[0].value = "";
if(twoArrays != null){
for(i=0; i<twoArrays.length; i++){
objTwo.options[i+1] = new Option(twoArrays[i][1]);
if(twoArrays[i][0] != null){
objTwo.options[i+1].value = twoArrays[i][0];
}
}
}
}
function setThree(obj2ID,obj3ID){
var objTwo = document.getElementById(obj2ID);
var objThree = document.getElementById(obj3ID);
var i;
var threeArrays = null;
if(objTwo.value.length > 0){
threeArrays = new Array();
for(i=0; i<threeArray.length; i++){
if(threeArray[i][0] == objTwo.value){
threeArrays[threeArrays.length] = new Array(threeArray[i][1],threeArray[i][2]);
}
}
}
for(i=objThree.options.length; i>=0; i--){
objThree.options[i] = null;
}
objThree.options[0] = new Option("请选择");
objThree.options[0].value = "";
if(threeArrays != null){
for(i=0; i<threeArrays.length; i++){
objThree.options[i+1] = new Option(threeArrays[i][1]);
if(threeArrays[i][0] != null){
objThree.options[i+1].value = threeArrays[i][0];
}
}
}
}
</script>
<body>
<table width="99%" border="0" align="center" style="border-bottom:1px solid #cccccc">
<tr>
<td width="10">
<select name="areaid" id="areaid" onChange="setTown('areaid','townid')">
<option value="">请选市县</option>
<option value="1">杭州</option>
<option value="2">湖州</option>
<option value="3">温州</option>
</select>
</td>
<td width="10">
<select name="townid" id="townid">
<option value="">请选地区</option>
</select>
</td>
</tr>
<tr></tr>
<tr>
<td width="10">
<select name="one" id="one" onChange="setTwo('one','two','three')">
<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td width="10">
<select name="two" id="two" onChange="setThree('two','three')">
<option value="">请选择</option>
</select>
</td>
<td width="10">
<select name="three" id="three">
<option value="">请选择</option>
</select>
</td>
</tr>
</table>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="javascript">
var areaArray = new Array();
areaArray[areaArray.length]=new Array("1","杭州");
areaArray[areaArray.length]=new Array("2","湖州");
areaArray[areaArray.length]=new Array("3","温州");
var townArray = new Array();
townArray[townArray.length]=new Array("1","1","上城区");
townArray[townArray.length]=new Array("1","2","下城区");
townArray[townArray.length]=new Array("2","3","南浔镇");
townArray[townArray.length]=new Array("2","4","菱湖镇");
townArray[townArray.length]=new Array("3","5","乐清");
townArray[townArray.length]=new Array("3","6","苍南");
function setTown(obj1ID,obj2ID){
var objArea = document.getElementById(obj1ID);
var objTown = document.getElementById(obj2ID);
var i;
var itemArray = null;
if(objArea.value.length > 0){
itemArray = new Array();
for(i=0; i<townArray.length; i++){
if(townArray[i][0] == objArea.value){
itemArray[itemArray.length] = new Array(townArray[i][1],townArray[i][2]);
}
}
}
for(i=objTown.options.length; i>=0; i--){
objTown.options[i] = null;
}
objTown.options[0] = new Option("请选地区");
objTown.options[0].value = "";
if(itemArray != null){
for(i=0; i<itemArray.length; i++){
objTown.options[i+1] = new Option(itemArray[i][1]);
if(itemArray[i][0] != null){
objTown.options[i].value = itemArray[i][0];
}
}
}
}
/** ------------------------------------------------------------------------------------------------ */
var oneArray = new Array();
oneArray[oneArray.length]=new Array("1","1");
oneArray[oneArray.length]=new Array("2","2");
oneArray[oneArray.length]=new Array("3","3");
var twoArray = new Array();
twoArray[twoArray.length]=new Array("1","11","11");
twoArray[twoArray.length]=new Array("1","12","12");
twoArray[twoArray.length]=new Array("1","13","13");
twoArray[twoArray.length]=new Array("2","21","21");
twoArray[twoArray.length]=new Array("2","22","22");
twoArray[twoArray.length]=new Array("3","31","31");
twoArray[twoArray.length]=new Array("3","32","32");
twoArray[twoArray.length]=new Array("3","33","33");
var threeArray = new Array();
threeArray[threeArray.length]=new Array("11","111","111");
threeArray[threeArray.length]=new Array("11","112","112");
threeArray[threeArray.length]=new Array("11","113","113");
threeArray[threeArray.length]=new Array("12","121","121");
threeArray[threeArray.length]=new Array("12","122","122");
threeArray[threeArray.length]=new Array("13","131","131");
threeArray[threeArray.length]=new Array("13","132","132");
threeArray[threeArray.length]=new Array("21","211","211");
threeArray[threeArray.length]=new Array("21","212","212");
threeArray[threeArray.length]=new Array("22","221","221");
threeArray[threeArray.length]=new Array("22","222","222");
threeArray[threeArray.length]=new Array("31","311","311");
threeArray[threeArray.length]=new Array("31","312","312");
threeArray[threeArray.length]=new Array("32","321","321");
threeArray[threeArray.length]=new Array("32","322","322");
threeArray[threeArray.length]=new Array("33","331","331");
threeArray[threeArray.length]=new Array("33","332","332");
function setTwo(obj1ID,obj2ID,obj3ID){
var objOne = document.getElementById(obj1ID);
var objTwo = document.getElementById(obj2ID);
var objThree = document.getElementById(obj3ID);
var i;
var twoArrays = null;
if(objOne.value.length > 0){
twoArrays = new Array();
for(i=0;i<twoArray.length;i++){
if(twoArray[i][0]==objOne.value){
twoArrays[twoArrays.length]=new Array(twoArray[i][1],twoArray[i][2]);
}
}
}
for(i=objTwo.options.length; i>=0; i--){
objTwo.options[i] = null;
}
objTwo.options[0] = new Option("请选择");
objTwo.options[0].value = "";
for(i=objThree.options.length; i>=0; i--){
objThree.options[i] = null;
}
objThree.options[0] = new Option("请选择");
objThree.options[0].value = "";
if(twoArrays != null){
for(i=0; i<twoArrays.length; i++){
objTwo.options[i+1] = new Option(twoArrays[i][1]);
if(twoArrays[i][0] != null){
objTwo.options[i+1].value = twoArrays[i][0];
}
}
}
}
function setThree(obj2ID,obj3ID){
var objTwo = document.getElementById(obj2ID);
var objThree = document.getElementById(obj3ID);
var i;
var threeArrays = null;
if(objTwo.value.length > 0){
threeArrays = new Array();
for(i=0; i<threeArray.length; i++){
if(threeArray[i][0] == objTwo.value){
threeArrays[threeArrays.length] = new Array(threeArray[i][1],threeArray[i][2]);
}
}
}
for(i=objThree.options.length; i>=0; i--){
objThree.options[i] = null;
}
objThree.options[0] = new Option("请选择");
objThree.options[0].value = "";
if(threeArrays != null){
for(i=0; i<threeArrays.length; i++){
objThree.options[i+1] = new Option(threeArrays[i][1]);
if(threeArrays[i][0] != null){
objThree.options[i+1].value = threeArrays[i][0];
}
}
}
}
</script>
<body>
<table width="99%" border="0" align="center" style="border-bottom:1px solid #cccccc">
<tr>
<td width="10">
<select name="areaid" id="areaid" onChange="setTown('areaid','townid')">
<option value="">请选市县</option>
<option value="1">杭州</option>
<option value="2">湖州</option>
<option value="3">温州</option>
</select>
</td>
<td width="10">
<select name="townid" id="townid">
<option value="">请选地区</option>
</select>
</td>
</tr>
<tr></tr>
<tr>
<td width="10">
<select name="one" id="one" onChange="setTwo('one','two','three')">
<option value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td width="10">
<select name="two" id="two" onChange="setThree('two','three')">
<option value="">请选择</option>
</select>
</td>
<td width="10">
<select name="three" id="three">
<option value="">请选择</option>
</select>
</td>
</tr>
</table>
</body>
</html>