省份选择小练习

最新推荐文章于 2024-08-29 10:04:09 发布

weixin_34395205

最新推荐文章于 2024-08-29 10:04:09 发布

阅读量116

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/swmhxhs/blog/719627

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AJAX案例--省份选择</title>
    <style>
        select {
            width: 150px;
            height: 50px;
            background: #dcc2da;

        }
        select > option {
            width: 150px;
            padding: 5px;
            background: #b3b0b3;
        }
    </style>
</head>
<body>
<select name="province" id="province">
    <option>请选择</option>
    <option>山东省</option>
    <option>辽宁省</option>
    <option>吉林省</option>
    <option>传奇</option>
</select>
<select id="city">
    <option>请选择</option>
</select>
<script>
    var pro=document.querySelector("#province");
    pro.onchange=function(){
        var city=document.querySelector("#city");
//        var opts=city.getElementsByTagName("option");
//        for(var i=opts.length-1;i>0;i--){
//            city.removeChild(opts[i]);
//        }
        city.innerHTM="";
        var proValue = document.querySelector("#province").value;
        var cities=[];
        switch (proValue){
            case "山东省":
                cities = ["青岛市","济南市","威海市","日照市","德州市"];
                break;
            case "吉林省":
                cities = ["长春市","松原市","吉林市","通化市","四平市"];
                break;
            case "辽宁省":
                cities = ["沈阳市","大连市","铁岭市","丹东市","锦州市"];
                break;
            case "传奇":
                cities = ["比奇","盟重","沙巴克","白日门","猪洞"];
                break;
        }

        /*老师原来写的*/
//        for(var j= 0,len=cities.length;j<len;j++){
//            var opt=document.createElement("option");
//            var textNode=document.createTextNode(cities[j]);
//            opt.appendChild(textNode);
//            city.appendChild(opt);
//        }
        /*javascript操作dom是一个很耗性能的过程，在某些情况下，不得不进行dom循环操作，
        我们每次对dom的操作都会触发"重排"，这严重影响到能耗，
        一般通常采取的做法是尽可能的减少dom操作来减少"重排"。
       面对循环操作dom的过程，我们选择使用文档碎片（creatDocumentFragment），
       将需要添加到dom中的内容一次性添加到文档碎片中，然后将文档碎片添加到dom树，
       这样就可以有效的减少操作dom的次数。
         */
        /*我优化一下*/
        var temp=document.createDocumentFragment();/*文档碎片(当把文档碎片附给某节点时，只是把文档碎片中的子节点附给了某节点，它本身并没有插入到这个节点中)*/
        for(var j= 0,len=cities.length;j<len;j++){
            var opt=document.createElement("option");//创建一个节点
            opt.innerHTML=cities[j];//给节点添加内容
            temp.appendChild(opt);//把创建的节点插入到temp文档中
        }
        city.appendChild(temp);//把temp文档插入到city当中

        /*总结一下，循环创建元素节点追加到文档碎片中， 循环完毕后将文档碎片追加到目标元素内！多次创建 一次更新，只更新了1次DOM*/

    }
</script>
</body>
</html>

转载于:https://my.oschina.net/swmhxhs/blog/719627