使用DOM编程实现省市联动

最新推荐文章于 2021-04-17 09:16:42 发布

夏虫语冰彡

最新推荐文章于 2021-04-17 09:16:42 发布

阅读量311

点赞数

本文链接：https://blog.csdn.net/qq_34283987/article/details/77950323

版权

使用DOM编程实现省市联动：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市联动</title>
        <!--<script src="../jsJava库/jsjava-core.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="../jsJava库/hashMap.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var map1 = new HashMap();
            var beijing = ['海淀区','大兴区','朝阳区','丰台区'];
            var shanxi = ['太原','大同','晋中','吕梁'];
            var henan = ['郑州','开封','洛阳'];
            map1.put('北京',beijing);
            map1.put('山西',shanxi);
            map1.put('河南',henan);


            var provns = map1.keyArr;
            var citys;
            window.onload = function(){
                var provnsNode = document.getElementById("provinces");
                for(var i in provns){
                    var provn = document.createElement("option");

                    var provnTextNode = document.createTextNode(provns[i]);
                    provn.appendChild(provnTextNode);
                    provnsNode.appendChild(provn);
                }
            }

            function selectProvinces (obj) {
                var opt = obj.options[obj.selectedIndex];
                var cityNode = document.getElementById("citys");
                //删除已添加结点，然后重新添加
                cityNode.length=0;

                for(var i in provns){
                    if(opt.text==provns[i]){
                        citys = map1.get(provns[i]);
                        for(var j in citys){
                            var city = document.createElement("option");
                            var cityTextNode = document.createTextNode(citys[j]);
                            city.appendChild(cityTextNode);
                            cityNode.appendChild(city);
                        }
                    }
                }

            }
        </script>
    </head>
    <body>
        省：
        <select id="provinces" onchange="selectProvinces(this);">
            <option value="" selected="selected">请选择</option>
        </select>
        市：
        <select id="citys" >
            <option value="" selected="selected">请选择</option>
        </select>

    </body>
</html>

附：手写HashMap.js
function HashMap(){
    var i = 0;
    this.keyArr = new Array();
    this.valueArr = new Array();

    this.getKeyIndex = function(keyArr,key){
        var keyIndex = -1;

        for(var i=0;i<keyArr.length;i++){
            if(keyArr[i]==key){
                keyIndex = i;
                break;
            }   

        }

        return keyIndex;

    }

    this.put = function(key,value){
        this.keyArr[i] = key;
        this.valueArr[i] = value;
        i++;
    }

    this.get = function(key){

        //找到key所在下标
        var keyIndex = this.getKeyIndex(this.keyArr,key);
        return this.valueArr[keyIndex];

    }

}

夏虫语冰彡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用DOM编程实现省市联动

使用DOM编程实现省市联动：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>省市联动</title> <!--<script src="../jsJava库/jsjava-core.js" type="text/javascript" charset="utf-8"></s
复制链接

扫一扫