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);
        }

    }
目录
相关文章
|
7月前
|
存储 JSON JavaScript
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
57 1
|
4月前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
42 1
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
12天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
12天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
25天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
18 4