閱讀307 返回首頁    go 阿裏雲 go 技術社區[雲棲]


DOM之城市二級聯動

1、HTML內容

複製代碼
<select id="province">
        <option>請選擇</option>
        <option>山東省</option>
        <option>吉林省</option>
        <option>上海市</option>
    </select>
    <select id="city">
        <option>請選擇</option>
    </select>
複製代碼

2、JS

複製代碼
var provinceE=document.getElementById("province");
    provinceE.onchange=function(){
        var city=document.getElementById("city");
        var opts=city.getElementsByTagName("option");
        for(var z=opts.length-1;z>0;z--){
            city.removeChild(opts[z]);
        }
        var province=provinceE.value;
        //alert(province);
        var citys=[];
        switch (province){
            case "山東省":
                citys=["青島市","濟南市","威海市","日照市","德州市"];
                break;
            case "吉林省":
                citys=["長春市","四平市","遼源市","通化市","白山市"];
                break;
            case "上海市":
                citys=["嘉定區","普陀區","黃浦區","虹口區","長寧區"];
                break;
        }
        for(var i=0;i<citys.length;i++){
            var option=document.createElement("option");
            var textNode=document.createTextNode(citys[i]);
            option.appendChild(textNode);
            city.appendChild(option);
        }

    }

最後更新:2017-11-05 11:34:21

  上一篇:go  如何把SVG小圖片轉換為 html字體圖表
  下一篇:go  我所知道的前端組件化與模塊化