body中
<body> <select id="se1"> </select> <select id="se2"> </select> </body>
<script>标签中
<script type="text/javascript"> window.onload = function () { var datas = { "吉林": ["长春", "四平", "松原"], "山东": ["青岛", "济南", "烟台"], "山西": ["大同", "太原", "运城"] }; var def = '吉林'; //加载省份 var s1 = document.getElementById('se1'); for (var key in datas) { //创建option标签 var opt1 = document.createElement('option'); opt1.innerHTML = key; opt1.value = key; opt1.selected = key == def ? true : false; s1.appendChild(opt1); } //加载城市 var s2 = document.getElementById('se2'); for (var i = 0; i < datas[def].length; i++) { var opt2 = document.createElement('option'); opt2.innerHTML = datas[def][i]; opt2.value = datas[def][i]; s2.appendChild(opt2); } //根据省份加载对应的城市 s1.onchange = function () { //获取当前选中的省份 //alert(this.value); //清空城市 再加载城市 while (s2.firstChild) { s2.removeChild(s2.firstChild); } for (var i = 0; i < datas[this.value].length; i++) { var opt3 = document.createElement('option'); opt3.innerHTML = datas[this.value][i]; opt3.value = datas[this.value][i]; s2.appendChild(opt3); } }; }; </script>
效果