javascript原生实现二级联动下拉菜单

 Java学习路线：搬砖工的Java学习路线
 作者：程序员小王
 程序员小王的博客：https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF
 扫描主页左侧二维码，加我微信 一起学习、一起进步
 欢迎点赞  收藏 ⭐留言 

1. selObj.value 获取下拉列表中选中项的值
2. selObj.options 下拉列表中所有选项构成的数组
3. selObj.selectedIndex 选中选项的下标
4. selObj.options[selObj.selectedIndex].text 选中选项的文本

案例：

    
    
    


城市：

    天津
     北京
    上海
    重庆

实现思路：
事件源头：城市对应的下拉列表
事件属性：选中的值改变 onchange
事件监听：根据选择城市展示县区信息

核心:监听函数的实现——>根据选中城市展示县区信息

1. json格式的数据准备：key-value
var city={
  tj:["北辰区","西青区","武清区","和平区","滨海新区"],
  zy:["红花港区","播州区"],
  bj:["海淀区","朝阳区","东城区"]
  zz:["二七区","金水区","中原区"],
}
2. 创建监听函数test();
   （1）每次选择前先去清空县区下拉列表的内容 document.getElementBYId("qx").innerText="";
    (2)获取城市的信息document.getElementBYId("city").value;
    (3)获取区县的值（两种方法） city.["tj"];
    (4)遍历区县的信息for(inner in 区县的值qus)
       a、为区县的值封装成文本节点
       b、创建option标签对象 document.crementElement("option");
       c、将文本节点追加到option中 option.appendChild(文本节点);
       d、将option封装到select select.appendChild(option);
3. 初始化方法，刷新页面时，自动选择第一个县区信息
function  init(){
            //初始化方法，刷新页面时，自动选择第一个县区信息
            test1();
        }

1、首先应该添加两个下拉列表并设置id属性来方便操作：

城市：

    天津
     遵义
    北京
    郑州

区/县：

js先提前准备区县的数据：

  //数据准备
        var city = {
            tj: ["北辰区", "西青区", "武清区", "和平区", "滨海新区"],
            zy: ["红花港区", "播州区"],
            bj: ["海淀区", "朝阳区", "东城区"],
            zz: ["二七区", "金水区", "中原区"],
        }

实现二级联动的方法：test1(),

实现初始化的方法，让打开网页时区县有初始数据init();

完整代码在githee仓库：：https://gitee.com/wanghengjie563135/java-web-notes.git