簡單的一個用javascript作的'省市區'三級聯動效果

時間 2019-11-15

標籤簡單一個 javascript 省市區三級聯動效果欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>javascript簡單三級聯動效果</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<script>
    var oProc=new Array("四川省","湖南省","廣東省");//隨意選擇三個省，如需更多，添加即是
    var oCity=new Array();//建立一個數組，用以存放市選擇項
    oCity[0]=new Array("成都市","綿陽市","達州市");
    oCity[1]=new Array("長沙市","常德市","湘潭市");
    oCity[2]=new Array("廣州市","深圳市","珠海市");
    var oDist=new Array();//建立一個數組，用於存放市級如下的各個區縣
    oDist[0]=new Array();//這是必須聲明的一項，不然會報異常
    oDist[1]=new Array();
    oDist[2]=new Array();
    oDist[0][0]=new Array("武侯區","錦江區","金牛區");
    oDist[0][1]=new Array("梓潼縣","安縣","羅江縣");
    oDist[0][2]=new Array("達縣","通川縣","宣漢縣");
    oDist[1][0]=new Array("長沙區","開福區","芙蓉區");
    oDist[1][1]=new Array("武陵區","鼎城區","漢壽縣");
    oDist[1][2]=new Array("湘潭縣","雨湖區","嶽塘區");
    oDist[2][0]=new Array("白雲區","天河區","黃埔區");
    oDist[2][1]=new Array("羅湖區","寶安區","福田區");
    oDist[2][2]=new Array("香洲區","金灣區","斗門區");
    //加載完成時，執行
    function showLoad(){
        var oproc=document.getElementById("proc");
        for(var i=0;i<oProc.length;i++){
            var oOpt=document.createElement("option");
            var oTxt=document.createTextNode(oProc[i]);
            oOpt.appendChild(oTxt);
            oproc.appendChild(oOpt);
        }
    }
    //當「proc」發生change事件時，執行
    function showCity(){
        var oproc=document.getElementById("proc");
        var ocity=document.getElementById("city");
        var odist=document.getElementById("dist");
        if(oproc.value=="-1"){//判斷，當未選擇時。將市級，區級中的內容清空
            ocity.options.length=1;
            odist.options.length=1;
        }else{
            ocity.options.length=1;
            odist.options.length=1;
            var num=oproc.options.selectedIndex;
            for(var i=0;i<oCity[num-1].length;i++){//循環加入數據
                var oOpt=document.createElement("option");
                var oTxt=document.createTextNode(oCity[num-1][i]);
                oOpt.appendChild(oTxt);
                ocity.appendChild(oOpt);
            }
        }

    }
    //當「city」發生change事件時，執行
    function showDist(){
        var oproc=document.getElementById("proc");
        var ocity=document.getElementById("city");
        var odist=document.getElementById("dist");
        if(ocity.value=="-1"){//判斷，當未選擇時。將區級中的內容清空
            odist.options.length=1;
        }else{
            odist.options.length=1;
            var numPro=oproc.options.selectedIndex;
            var numCity=ocity.options.selectedIndex;
            for(var i=0;i<oDist[numPro-1][numCity-1].length;i++){
                var oOpt=document.createElement("option");//建立一個option元素節點
                var oTxt=document.createTextNode(oDist[numPro-1][numCity-1][i]);//建立一個文本節點
                oOpt.appendChild(oTxt);//將文本節點加入到oOpt元素節點中
                odist.appendChild(oOpt);//將oOpt元素節點添加到odist中
            }
        }
    }
</script>
<body onload="showLoad()"><!-- 頁面加載完成時，初始化省選擇項 -->
<div>
    請選擇地區：
    <select id="proc" onchange="showCity()">
        <option value="-1">--請選擇省--</option>
    </select>
    <select id="city" onchange="showDist()" >
        <option value="-1">--請選擇市--</option>
    </select>
    <select id="dist">
        <option value="-1">--請選擇區--</option>
    </select>
</div>
</body>
</html>

其實要真正作上一個‘’省市區級‘’的三級聯動，所需的數據還多，只需向數組中添加數據就OK了。
javascript

相關標籤/搜索

每日一句

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