简单的纯js三级联动

参考这个  日尼禾尔  二级联动

写了三级联动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三级城市联动</title>
</head>
<body>
    <select id="one" onchange="func(this.value)">
        <option value="">-请选择省-</option>
        <option value="0">浙江省</option>
        <option value="1">广东省</option>
        <option value="2">福建省</option>
    </select>
    <select id="two" onchange="funcc()">
        <option value="">-请选择市-</option>
    </select>

        <select id="three" >
        <option value="">-请选择区-</option>
    </select>
</body>

<script>
    var two = document.getElementById('two');

    city = [];//申明
    
　　//定义二级数据
    city[0] = ['杭州市'];
    city[1] = ['广州市','深圳市'];
    city[2] = ['厦门市'];
    function func(m){
        two.length = 1;
　　　//遍历生产option选项
        for (var i = 0; i < city[m].length; i++) {

　　　　//创建一个option 把数据存储在option 
            var op = new Option(city[m][i],i);

　　　　//把带有数据的option 添加到第二个select
            two.add(op);
        };
    }

    dist=[[]];
    dist[0]=[[]];
    dist[1]=[[]];
    dist[2]=[[]];
    //定义三级联动
    dist[0][0]=['西湖区'];
    dist[1][0]=['天河区','番禺区','越秀区'];
    dist[1][1]=['南山区','福田区','罗湖区']; 
    dist[2][0]=['集美区','思明区'];
    var three = document.getElementById('three');
    

    function funcc(){
      n=document.getElementById("two").selectedIndex;
        three.length = 1;
　　　//遍历生产option选项
     m=document.getElementById("one").selectedIndex;
     if(m>0) m-=1;
      if(n>0)n-=1;
        for (var j = 0; j< dist[m][n].length; j++) {

　　　　//创建一个option 把数据存储在option 
            var op = new Option(dist[m][n][j],j);

　　　　//把带有数据的option 添加到第二个select
            three.add(op);
        };
    }
</script>
</html>

 

posted on 2018-06-22 02:12  Honey_Badger  阅读(2391)  评论(0)  编辑  收藏  举报

导航

Copyright © 2017 Honey_Badger
github