js注冊表單中實現地區選擇效果

本文轉載自查看原文 2018-05-01 11:05 879

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇地區</title>
</head>
<script type="text/javascript">
    var regionList=[];
    regionList["湖南省"]=["長沙市","株洲市","邵陽市"];
    regionList["廣東省"]=["廣州市","深圳市","東莞市"];

    onload=function(){
        var selectProvince=document.querySelector("#province");
//這個地方使用for(var i=0;i<region.length;i++)就會報錯，不知道是為啥，麻煩知道的大神給指導下哈
        for(var i in regionList){
            var element=document.createElement("OPTION");
            element.value=i;
            element.innerHTML=i;
            selectProvince.appendChild(element);
        }
    }

    function changeCity(){
        var selectProvince=document.querySelector("#province");
        var selectCity=document.querySelector("#city");
        selectCity.innerHTML="<option>請選擇城市/地區</option>";
        for(var i in regionList[selectProvince.value]){
            var element=document.createElement("OPTION");
            element.value=regionList[selectProvince.value][i];
            element.innerHTML=regionList[selectProvince.value][i];
            selectCity.appendChild(element);
        }
    }
</script>
<body>
<div id="main">
    <dl class="register_row">
        <dt>所在地區：</dt>
        <dd>
            <select id="province" onChange="changeCity()" style="width:120px;">
                <option>請選擇省/城市</option>
            </select>
        </dd>
        <dd>
            <select id="city"  style="width:130px;">
                <option>請選擇城市/地區</option>
            </select>
        </dd>
    </dl>
</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS通過div實現地區選擇三級聯動 HTML注冊表單的簡易實現使用javaScript實現注冊表單驗證用php和ajax寫一個省市區的三級聯動，實現地區的下拉選擇 Element UI 實現注冊表單驗證功能 JavaScript：使用JavaScript 實現注冊表單的校驗注冊表單 form 表單提交數據帝國CMS7.5實現地區三級聯動並且前台可地區篩選的教程 13 迷人的注冊表單設計 mapbox、echarts實現地圖流動效果