<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="provinces"> <option value="">请选择省份</option> </select> <select name="" id="citys"> <option value="">请选择城市</option> </select> <script> data={'江西省':['南昌市','赣州市'],'广东省':['广州市','深圳市'],'广西省':['桂林市','柳州市']}; var pro_ele=document.getElementById('provinces'); var city_ele=document.getElementById('citys'); // 获取到两个父节点，用于添加子节点 for (var i in data) { var ele=document.createElement('option'); // 创建'option'标签 ele.innerHTML=i; // option标签文本内容为data的键 pro_ele.appendChild(ele); // 父节点添加子节点 }; pro_ele.onchange=function () { // onchange事件：域的内容被改变 console.log(this.selectedIndex); // this指的是第一个select标签，selectedIndex设置或者返回select对象已选选项的索引值。(以 0 起始) console.log(this.options[this.selectedIndex]); // options返回一个数组，数组里有对应的option标签 var citys=data[this.options[this.selectedIndex].innerHTML]; // 得到data对象里的键所对应的值 city_ele.options.length=1; // length属性返回集合的option元素数目，设置默认值即能清空之前所选择添加的数据；如果没有这个默认，那么会有BUG(即选择了的数据不会删除只会累加) for (var i=0; i<citys.length; i++) { // 循环遍历citys数组 var ele=document.createElement('option'); // 创建'option'标签 ele.innerHTML=citys[i]; // 设置option标签文本内容 city_ele.appendChild(ele); // 父节点添加子节点 }; }; </script> </body> </html>