数组模拟三级联动

2020-01-15 13:02:25 阅读：217 来源： 互联网

标签：岱岳联动周村数组张店 querySelector var document 三级

<!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>

标签：岱岳,联动,周村,数组,张店,querySelector,var,document,三级
来源： https://www.cnblogs.com/yueranran/p/12196098.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

数组模拟三级联动