DOM之城市二级联动

简介: 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);
        }

    }
目录
相关文章
|
存储 JSON JavaScript
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)

热门文章

最新文章