请问这样的数组，怎么用javascript实现三级联动的下拉菜单（select）？
区域省份城市华北辽宁沈阳西南重庆重庆华东安徽合肥华北河南郑州华北吉林长春华北河北石家庄西南四川成都西南云南昆明西南贵州贵阳上面是表的格式，那么数组是array("西南",...
区域 省份 城市
华北 辽宁 沈阳
西南 重庆 重庆
华东 安徽 合肥
华北 河南 郑州
华北 吉林 长春
华北 河北 石家庄
西南 四川 成都
西南 云南 昆明
西南 贵州 贵阳
上面是表的格式，那么数组是array("西南","贵州","贵阳
")这样的，那么三级联动的select，结合javascript代码怎么写？ 展开
华北 辽宁 沈阳
西南 重庆 重庆
华东 安徽 合肥
华北 河南 郑州
华北 吉林 长春
华北 河北 石家庄
西南 四川 成都
西南 云南 昆明
西南 贵州 贵阳
上面是表的格式，那么数组是array("西南","贵州","贵阳
")这样的，那么三级联动的select，结合javascript代码怎么写？ 展开
3个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var array=[
["华北","辽宁","沈阳"],
["西南","重庆","重庆"],
["华东","安徽","合肥"],
["华北","河南","郑州"],
["华北","吉林","长春"],
["华北","河北","石家庄"],
["西南","四川","成都"],
["西南","云南","昆明"],
["西南","贵州","贵阳"]
]
function init(s1name,s2name,jb){//alert(s1name.length+s2name);
var sl2=document.getElementById(s2name);//alert(sl2.length);
if(s1name.length==0){
//document.getElementById("s1").options[0]=new Option("--请选择--",0+"");
document.getElementById("s2").options[0]=new Option("--请选择--",0+"");
document.getElementById("s3").options[0]=new Option("--请选择--",0+"");
var sa1=[];
for(var i=0;i<array.length;i++){
if(sa1.length!=0){
var a=0;
for(var o=0;o<sa1.length;o++){//alert(sa1[o]+array[i][0]);
if(sa1[o]==array[i][0]){//alert(sa1[o]+array[i][0]);alert("OK");
a=-1;break;
}
}
if(a==0){
sa1[i]=array[i][jb];
}
}else{//alert(sa1.length+"--"+array[i][0]);
sa1[i]=array[i][jb];
}
}//alert(sa1.length);var dd="--请选择--";
sl2.options[sl2.length]=new Option("--请选择--",0+"");
for(var i=0;i<sa1.length;i++){
sl2.options[sl2.length]=new Option(sa1[i],(i+1)+"");
}
}else{
var slup=document.getElementById(s1name);
sl2.innerHTML="";
var sa=[];//alert(slup.options[slup.value].innerHTML);
for(var i=0,j=0;i<array.length;i++){
if(slup.options[slup.value].innerHTML==array[i][jb-1]){
sa[j]=array[i][jb];j++;
}
}//alert(sa.length);
sl2.options[sl2.length]=new Option("--请选择--",0+"");
for(var i=0;i<sa.length;i++){
sl2.options[sl2.length]=new Option(sa[i],(i+1)+"");
}
}
}
</script>
</head>
<body onload="javascript:init('','s1',0);">
<select name="s1" id="s1" onchange="init('s1','s2',1)"></select>
<select name="s2" id="s2" onchange="init('s2','s3',2)"></select>
<select name="s3" id="s3"></select>
</body>
</html>
可以了！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var array=[
["华北","辽宁","沈阳"],
["西南","重庆","重庆"],
["华东","安徽","合肥"],
["华北","河南","郑州"],
["华北","吉林","长春"],
["华北","河北","石家庄"],
["西南","四川","成都"],
["西南","云南","昆明"],
["西南","贵州","贵阳"]
]
function init(s1name,s2name,jb){//alert(s1name.length+s2name);
var sl2=document.getElementById(s2name);//alert(sl2.length);
if(s1name.length==0){
//document.getElementById("s1").options[0]=new Option("--请选择--",0+"");
document.getElementById("s2").options[0]=new Option("--请选择--",0+"");
document.getElementById("s3").options[0]=new Option("--请选择--",0+"");
var sa1=[];
for(var i=0;i<array.length;i++){
if(sa1.length!=0){
var a=0;
for(var o=0;o<sa1.length;o++){//alert(sa1[o]+array[i][0]);
if(sa1[o]==array[i][0]){//alert(sa1[o]+array[i][0]);alert("OK");
a=-1;break;
}
}
if(a==0){
sa1[i]=array[i][jb];
}
}else{//alert(sa1.length+"--"+array[i][0]);
sa1[i]=array[i][jb];
}
}//alert(sa1.length);var dd="--请选择--";
sl2.options[sl2.length]=new Option("--请选择--",0+"");
for(var i=0;i<sa1.length;i++){
sl2.options[sl2.length]=new Option(sa1[i],(i+1)+"");
}
}else{
var slup=document.getElementById(s1name);
sl2.innerHTML="";
var sa=[];//alert(slup.options[slup.value].innerHTML);
for(var i=0,j=0;i<array.length;i++){
if(slup.options[slup.value].innerHTML==array[i][jb-1]){
sa[j]=array[i][jb];j++;
}
}//alert(sa.length);
sl2.options[sl2.length]=new Option("--请选择--",0+"");
for(var i=0;i<sa.length;i++){
sl2.options[sl2.length]=new Option(sa[i],(i+1)+"");
}
}
}
</script>
</head>
<body onload="javascript:init('','s1',0);">
<select name="s1" id="s1" onchange="init('s1','s2',1)"></select>
<select name="s2" id="s2" onchange="init('s2','s3',2)"></select>
<select name="s3" id="s3"></select>
</body>
</html>
可以了！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
