你这个问题,我以前碰到过。为了解决它,花了我一整天的时间,当时也是不太熟悉SCRIPT。现在我愿意拿出来和你一起分享它。下面的代码都调试过了,粘贴即可。<html> <Script LANGUAGE ="JavaScript" TYPE ="text/javascript" > <!-- // 向列表objList中添加新的元素 function addElement(objList,tex,val){ var vn = new Option(tex,val); objList.add(vn); } // 清空列表objList中的元素 function clear(objList){ len=objList.length; for(i=len-1;i>=0;i--) objList.options[i]=null; addElement(objList , "全部" , "全部" ) ; } country = new Array ; city = new Array ; country[0] = new Array("美国","加拿大","把戏") ; country[1] = new Array("法国","英国") ;
city[0] = new Array("纽约" , "华盛顿" , "罗山机" ) ; city[1] = new Array("加拿大", "加拿大B"); city[2] = new Array("巴西1","巴西2","巴西3"); city[3] = new Array("巴黎" , "法国2" , "法国3" ); city[4] = new Array("伦敦" , "英国Y"); // 改变洲名,刷新国家名称 function changeContinent(){ cBox = conti ; con = countries ; if(cBox.selectedIndex != 0){ clear(con); for(var i=0; i<country[cBox.selectedIndex-1].length; i++) addElement(con , country[cBox.selectedIndex-1][i],country[cBox.selectedIndex-1][i]);
}else{ clear(con) ; } clear(cities); }
// 改变国家名称,刷新城市列表 function changeCountry(){ cBox = countries ; cc = cities ; clear(cc) ; var llen = cBox.length - 1 ; var index = cBox.selectedIndex ; var ss = conti.selectedIndex -1 + (conti.selectedIndex -1) * country[conti.selectedIndex -1].length + index -1 ; if(index != 0){ for(var i=0 ; i < city[ss].length ; i++){ addElement(cc , city[ss][i] , city[ss][i]) ; } }
1、用 iframe 做
后面两个选择框做成iframe 用数据库查询2、用javascript
http://www.gnzx.com:8088/005.htm<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head><body></body><BODY>
<SELECT NAME="s1"><option>需要JavaScript才能正确显示</SELECT>
<SELECT NAME="s2"></SELECT>
<SELECT NAME="s3"></SELECT>
<SELECT NAME="s4"></SELECT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//选择框的名字
selector = [ "s1", "s2", "s3", "s4" ];
//选择项: "名字", "值", 子选择
menu = [
"地球","1",
[
"中国","86",
[
"北京","BJ",
[
"--","1",null
],
"四川","SC",
[
"成都","28",null,
"乐山","",null,
"攀枝花","",null,
"自贡","",null,
"德阳","",null,
"绵阳","",null
]
],
"米国","1",
[
"加利福尼亚","CA",
[
"旧金山","1",null,
"洛杉矶","2",null
],
"华盛顿","WA",
[
"西雅图","seattle",null
]
]
],
"火星","2",
[
"大峡谷","86",
[
"小山丘","BJ",
[
"A地区","28",null,
"B地区","",null,
"C地区","",null
]
]
]
];
function wizz(level)
{
if( level == 0 )
a = menu;
else
{
str = "menu";
for( i=0; i<level; i++ )
str += "[" + (document.all[selector[i]].selectedIndex * 3 + 2) + "]";
a = eval(str);
}
if( a == null ) return;
s = document.all[selector[level]];
i = s.length;
while( i > 0 ) s.options[--i] = null;
while( i < Math.floor(a.length/3) )
s.options[i] = Option( a[i*3], a[i++*3+1] );
s.onchange = Function("wizz(" + (level+1) + ")");
wizz(level+1);
}
wizz(0);
//-->
</SCRIPT>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head><body>
<SELECT name="Continet" onchange="ChgContinet()">
<OPTION SELECTED value="">-请选择洲-</OPTION>
<OPTION value="AMERCIA"> 美洲</OPTION>
<OPTION value="ASIA"> 亚洲</OPTION>
</SELECT>
<SELECT name="Country" onchange="ChgCountry()">
<OPTION SELECTED>-请选择国家-</OPTION>
</SELECT>
<SELECT name="City">
<OPTION SELECTED>-请选择城市-</OPTION>
</SELECT>
</body>
</html>
<script language="JavaScript" type="text/JavaScript">
var ChinaCity = new Array("安徽","澳门","北京","重庆","福建","甘肃","广东","广西","贵州","海南","河北","黑龙江","河南","湖北","湖南","江苏","江西","吉林","辽宁","内蒙古","宁夏","青海","陕西","山东","山西","上海","四川","台湾","天津","新疆","香港","西藏","云南","浙江");
var UsCity = new Array("城市一","城市二","城市三","城市四");
var CanCity = new Array("城市A","城市B","城市C","城市D");
var JpCity = new Array("城市a","城市b","城市c","城市d");
var AmCountry = new Array( "美国","加拿大" );
var AmCounValue = new Array( "US","CAN" );
var AsCountry = new Array( "中国","日本" );
var AsCounValue = new Array( "CHINA", "JP" );
function ChgContinet() {
var SelConValue = "";
var SelSize = 0;
var SelField = window.Country;
var stCountry = new Array();
var stValue= new Array();
var NewOption;
for( var i = SelField.length - 1; i>=0; i-- ){
SelField.remove(i);
}
SelConValue = Continet.options[Continet.selectedIndex].value;
if( SelConValue == "AMERCIA" ) {
stCountry = AmCountry;
stValue = AmCounValue;
} else if ( SelConValue == "ASIA" ) {
stCountry = AsCountry;
stValue = AsCounValue;
} else if ( SelConValue == "" ) {
NewOption = document.createElement("OPTION")
NewOption.text = "-请选择国家-";
NewOption.value = "";
SelField.add(NewOption);
ChgCountry();
return;
}
SelSize = stCountry.length;
for(var i=0; i<SelSize; i++) {
NewOption = document.createElement("OPTION");
NewOption.text = stCountry[i];
NewOption.value = stValue[i];
SelField.add(NewOption);
}
ChgCountry();
}
function ChgCountry() {
var SelValue = "";
var SelSize = 0;
var RightSel = window.City;
var NewOption;
var stCity = new Array();
for(var i=RightSel.length-1; i>=0; i--){
RightSel.remove(i);
}
SelValue = Country.options[Country.selectedIndex].value;
if(SelValue == "CHINA") {
stCity = ChinaCity;
} else if(SelValue == "US") {
stCity = UsCity;
} else if(SelValue == "CAN") {
stCity = CanCity;
} else if(SelValue == "JP") {
stCity = JpCity;
} else if(SelValue == "") {
NewOption = document.createElement("OPTION");
NewOption.text = "-请选择城市-";
NewOption.value =
RightSel.add(NewOption);
return;
}
SelSize = stCity.length;
for(var i=0; i<SelSize; i++) {
NewOption = document.createElement("OPTION");
NewOption.text = stCity[i];
RightSel.add(NewOption);
}}
</script>
<BODY>
<SELECT NAME="s1"><option>需要JavaScript才能正确显示</SELECT>
<SELECT NAME="s2"></SELECT>
<SELECT NAME="s3"></SELECT>
<SELECT NAME="s4"></SELECT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//选择框的名字
selector = [ "s1", "s2", "s3", "s4" ];
//选择项: "名字", "值", 子选择
menu = [
"地球","1",
[
"中国","86",
[
"北京","BJ",
[
"--","1",null
],
"四川","SC",
[
"成都","28",null,
"乐山","",null,
"攀枝花","",null,
"自贡","",null,
"德阳","",null,
"绵阳","",null
]
],
"米国","1",
[
"加利福尼亚","CA",
[
"旧金山","1",null,
"洛杉矶","2",null
],
"华盛顿","WA",
[
"西雅图","seattle",null
]
]
],
"火星","2",
[
"大峡谷","86",
[
"小山丘","BJ",
[
"A地区","28",null,
"B地区","",null,
"C地区","",null
]
]
]
];
function wizz(level)
{
if( level == 0 )
a = menu;
else
{
str = "menu";
for( i=0; i<level; i++ )
str += "[" + (document.all[selector[i]].selectedIndex * 3 + 2) + "]";
a = eval(str);
}
if( a == null ) return;
s = document.all[selector[level]];
i = s.length;
while( i > 0 ) s.options[--i] = null;
while( i < Math.floor(a.length/3) )
s.options[i] = Option( a[i*3], a[i++*3+1] );
s.onchange = Function("wizz(" + (level+1) + ")");
wizz(level+1);
}
wizz(0);
//-->
</SCRIPT>
<p align="right"><a href="http://fason.nease.net">【阿信的小天地】</a></p>
</BODY>
<Script LANGUAGE ="JavaScript" TYPE ="text/javascript" >
<!-- // 向列表objList中添加新的元素
function addElement(objList,tex,val){
var vn = new Option(tex,val);
objList.add(vn);
}
// 清空列表objList中的元素
function clear(objList){
len=objList.length;
for(i=len-1;i>=0;i--)
objList.options[i]=null;
addElement(objList , "全部" , "全部" ) ;
}
country = new Array ;
city = new Array ;
country[0] = new Array("美国","加拿大","把戏") ;
country[1] = new Array("法国","英国") ;
city[0] = new Array("纽约" , "华盛顿" , "罗山机" ) ;
city[1] = new Array("加拿大", "加拿大B");
city[2] = new Array("巴西1","巴西2","巴西3");
city[3] = new Array("巴黎" , "法国2" , "法国3" );
city[4] = new Array("伦敦" , "英国Y"); // 改变洲名,刷新国家名称
function changeContinent(){
cBox = conti ;
con = countries ;
if(cBox.selectedIndex != 0){
clear(con);
for(var i=0; i<country[cBox.selectedIndex-1].length; i++)
addElement(con , country[cBox.selectedIndex-1][i],country[cBox.selectedIndex-1][i]);
}else{
clear(con) ;
}
clear(cities);
}
// 改变国家名称,刷新城市列表
function changeCountry(){
cBox = countries ;
cc = cities ;
clear(cc) ;
var llen = cBox.length - 1 ;
var index = cBox.selectedIndex ;
var ss = conti.selectedIndex -1 + (conti.selectedIndex -1) * country[conti.selectedIndex -1].length + index -1 ;
if(index != 0){
for(var i=0 ; i < city[ss].length ; i++){
addElement(cc , city[ss][i] , city[ss][i]) ;
}
}
}
-->
</Script><body >洲名<SELECT size=4 name=conti onChange='changeContinent();'>
<OPTION value='' >全部</OPTION>
<OPTION value='美洲' >美洲</OPTION>
<OPTION value='欧洲' >欧洲</OPTION>
</SELECT>
</SELECT>
国家<SELECT size=4 name="countries" onChange='changeCountry();'>
<OPTION value='' >全部</OPTION>
</SELECT>城市<SELECT size=4 name="cities">
<OPTION value='' >全部</OPTION>
</SELECT>
</body>
</html>
<select name=province onchange="cityName(this.selectedIndex)">
<option value="">请选择省名</option>
</select><select name=city>
<option value="">请选择城名</option>
</select>
</form><script language=javascript>var provinceName = ["美洲", "欧洲", "安徽", "江西"];
var city1 = ["美国", "加拿大"];
var city2 = ["法国", "英国"];
var city3 = ["合肥", "翕县", "黄山", "祁门", "休宁"];
var city4 = ["南昌", "九江", "赣州", "上饶", "新余", "景德镇"];
function province()
{ var e = document.form1.province;
for (var i=0; i<provinceName.length; i++)
e.options.add(new Option(provinceName[i], provinceName[i]));
}
function cityName(n)
{
var e = document.form1.city;
e.options.length = 1;
if (n == 0) return;
var a = eval("city"+ n); //得到城市的数组名
for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i]));
}
window.attachEvent("onload", province); //初始时给省名下拉框赋内容
</script>