簡單的純js三級聯動

時間 2019-12-08

原文原文鏈接

參考這個日尼禾爾二級聯動html

寫了三級聯動this

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。