三級聯動

時間 2019-11-21
標籤三級聯動简体版
原文原文鏈接
 <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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。