码迷,mamicode.com
首页 > 编程语言 > 详细

数组模拟三级联动

时间:2020-01-15 13:55:56      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:tle   ice   三级联动   sele   code   value   port   device   viewport   

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>三级联动</title>
</head>
<body>
    省:<select id="sel1"></select>
    市:<select id="sel2"></select>
    区:<select id="sel3"></select>
</body>
<script type="text/javascript">
    var arr=[
    山东,[
    泰安,[岱岳,泰山,高新],
    淄博,[周村,张店,临淄]
    ],
    北京,[
    朝阳,[岱岳1,泰山1,高新1],
    海淀,[周村1,张店1,临淄1]
    ],
    山西,[
    太原,[岱岳2,泰山2,高新2],
    运城,[周村2,张店2,临淄2]
    ]
    ];
    var sel1=document.querySelector(#sel1);
    var sel2=document.querySelector(#sel2);
    var sel3=document.querySelector(#sel3);
    for(var i=0;i<arr.length;i++){
        if(typeof arr[i]==string){
            sel1.add(new Option(arr[i],arr[i]));
        }
    }
    sel1.onchange=function(){
        for(var i=0;i<arr.length;i++){
        if(typeof arr[i]==string){
            if(sel1.value==arr[i]){
                var brr=arr[i+1];
                sel2.innerHTML=‘‘
                for(var j=0;j<arr.length;j++){
                if(typeof brr[j]==string){
                    sel2.add(new Option(brr[j],brr[j]));
                }
            }
          }
        }
    }
    }
    sel2.onchange=function(){
        for(var i=0;i<arr.length;i++){
            if (typeof arr[i]!=string) {
                var brr=arr[i];
                for(var j=0;j<brr.length;j++){
                    if(typeof brr[j]==string){
                            if(brr[j]==sel2.value){
                                var crr=brr[j+1]
                                sel3.innerHTML=‘‘
                                for(var k=0;k<crr.length;k++){
                                    sel3.add(new Option(crr[k],crr[k]  ));
                                }
                            }
                    }
                }
            }
        }
    }
</script>
</html>

数组模拟三级联动

标签:tle   ice   三级联动   sele   code   value   port   device   viewport   

原文地址:https://www.cnblogs.com/yueranran/p/12196098.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!