示图

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> window.onload = function () { var datas = { '广东': ['珠海', '深圳', '广州'], '江西': ['九江', '南昌', '景德镇'], '浙江': ['杭州', '金华', '衢州'] } var sheng = document.getElementById('s1'); //把省加载到option for (var key in datas) { var op = document.createElement('option'); op.value = key; op.innerHTML = key; sheng.appendChild(op); } var shi = document.getElementById('s2'); //省发生改变动时发生事件 sheng.onchange = function () { //清除市的option while (shi.firstChild) { shi.firstChild.remove(); } for( var i=0;i<datas[sheng.value].length;i++){ var op = document.createElement('option'); op.value = datas[sheng.value][i]; op.innerHTML = datas[sheng.value][i]; shi.appendChild(op); } } sheng.onchange();//首次加载时调用 } </script> </head> <body> 省:<select id="s1"></select> 市:<select id="s2"></select> </body> </html>