<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select class="ppp" onchange="provider(this)"></select> <select id="city"></select> </body> <script> local_data = {"湖北":["武汉","襄阳"],"浙江":["杭州","嘉兴"]}; //获取到父标签 var pro = document.getElementsByClassName("ppp")[0]; //像标签元素中添加内容 for (var i in local_data) { //创建标签元素 var ele_labs = document.createElement("option"); //获取的省级资源,i表示key ele_labs.innerHTML = i; //把资源添加到通过option标签添加到select标签中 pro.appendChild(ele_labs); } //this表示的就是当前的标签 select function provider(thi) { //thi.options 获取到的当前select下的所有option对象 //thi.selectedIndex 获取option下标 var sel = thi.options[thi.selectedIndex].innerHTML; //获取城市的父级标签 var eles = document.getElementById("city"); eles.options.length=0;//先清除上一层触发选择的区域 for(var i=0;i<local_data[sel].length;i++) { var ops = document.createElement("option"); ops.innerHTML=local_data[sel][i]; eles.appendChild(ops); } } </script> </html>