三級聯動

小金king發表於2018-12-26
 <p>
        請選擇地區：
        <select name="" id="proc">
            <option value="">--請選擇省--</option>
        </select>
        <select name="" id="city">
            <option value="">--請選擇市--</option>
        </select>
        <select name="" id="dist">
            <option value="">--請選擇區--</option>
        </select>
    </p>

    <body>

        <script>
            //宣告省
            var oProc = ["安徽", "上海", "山東"]; //直接宣告array
            //宣告市
            var oCity = [
                ["合肥", "淮南", "蕪湖"],
                ["浦東", "閔行", "浦西"],
                ["濟南", "青島", "棗莊"]
            ];
            //宣告區
            var oDist = [
                [
                    ["政務區", "廬陽區", "蜀山區"],
                    ["田家庵區", "大通區", "九龍崗區"],
                    ["鏡湖區", "鳩江區", "三山區"]
                ],
                [
                    ["浦東1", "浦東2", "浦東3"],
                    ["閔行1", "閔行2", "閔行3"],
                    ["浦西1", "浦西", "浦西3"]
                ],
                [
                    ["歷下區", "天橋區", "長清區"],
                    ["市南區", "市北區", "李滄區"],
                    ["薛城區", "市中區", "嶧城區"]
                ]
            ];

            //   目標：實現三級聯動 
            ///  分析 一下 
            // 1.    一進來應該載入所有的省的內容  
            // 2.     選擇了省以後 ，動態載入當前省下面的所有的城市 
            // 3.    選擇了城市以後，動態去載入當前城市下面所有的縣



            // 1.    一進來應該載入所有的省的內容  
            var proc = document.getElementById(`proc`);
            var city = document.getElementById(`city`);
            var dist = document.getElementById(`dist`);

            for (var i = 0; i < oProc.length; i++) {
                var op = document.createElement(`option`);
                op.innerText = oProc[i];
                proc.appendChild(op);
            }

            // 2.     選擇了省以後 ，動態載入當前省下面的所有的城市 
            proc.onchange = function () {

                if (proc.options.selectedIndex == 0) {  //判斷如果都沒選中的時候,程式碼不執行
                    city.options.length = 1;
                    dist.options.length = 1;
                    return false;
                }
                city.options.length = 1;
                dist.options.length = 1;
                var select = proc.options.selectedIndex; //返回的是當前省被選中的那個索引值 ，這個值是從1 開始

                console.log(select)
                var index = select - 1;

                for (var j = 0; j < oCity[index].length; j++) {
                    var cop = document.createElement(`option`);
                    cop.innerText = oCity[index][j];
                    city.appendChild(cop);
                }
            }
            // 3.    選擇了城市以後，動態去載入當前城市下面所有的縣

            city.onchange = function () {
                if (city.options.selectedIndex == 0) {
                    dist.options.length = 1;
                    return false;
                }

                dist.options.length = 1;

                var Cselct = city.options.selectedIndex;
                //這個是是拿到的城市選中
                console.log(Cselct)
                // 的那個

                var Sselct = proc.options.selectedIndex // 拿到選中的省的索引  

                for (var i = 0; i < oDist[Sselct - 1][Cselct - 1].length; i++) {
                    var dop = document.createElement(`option`);
                    dop.innerText = oDist[Sselct - 1][Cselct - 1][i];
                    dist.appendChild(dop);
                }

            }
        </script>

 

相關文章