javascript实现兼容的下拉选框联动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
    var data = {
        "北京市": ["海淀区","朝阳区","丰台区"],
        "河北省": ["石家庄","唐山","秦皇岛"],
        "辽宁省": ["沈阳","大连","鞍山"],
        "山东省": ["青岛","济南","烟台"]
    }
    /* --通过js实现二级联动下拉框-- */
    function getCountry(){
        //获取select元素
        var oSelect = document.getElementsByName("country")[0];
    }
    
    /* 练习2 */
    function selectCity(thisobj) {
        //1.获取用户选中的省份

        var index = thisobj.selectedIndex;
        var prov = thisobj.options[index].value;


        //2.根据省份获取该省份下所有的城市列表 北京市
        var arrCity = data[prov];

        var citySpan = document.getElementById("citySpan");
        citySpan.innerHTML = "<select id='city'><option>--选择城市--</option></select>";
        //-------------------------------------------------------------

        //3.将该省份下所有的城市 作为option选项填充到第二个select列表中
        //>>获取第二个select
        var oCity = document.getElementById("city");


        //海淀区 --> <option>海淀区</option>
        for (var i = 0; i < arrCity.length; i++) {
            var oOpt = document.createElement("option");
            oOpt.appendChild(document.createTextNode(arrCity[i]));

            oCity.appendChild(oOpt);
        }
    }
    
</script>
</head>

<body>
    
    <select name="country" onchange="getCountry()"  >
        <option value="none">--选择国家--</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="日本">日本</option>
    </select>
    <br><br>
    <hr/>
    <br>
    <div id="seleDiv">
        
        <select id="province" onchange="selectCity(this)">
            <option>--选择省市--</option>
            <option>北京市</option>
            <option>河北省</option>
            <option>辽宁省</option>
            <option>山东省</option>
        </select>
        <span id="citySpan">
            <select id="city">
                <option>--选择城市--</option>
            </select>
        </span>
    </div>
</body>

</html>
javascript实现兼容的下拉选框联动

推荐阅读更多精彩内容
