<head>
<title></title>
<script type="text/javascript">
var dic = {"河北省":["邯郸","石家庄","保定"],"河南省":["郑州","新乡","开封"],"山东":["济南","青岛"]};
function init() {
var select = document.getElementById_x("pro");
var op = document_createElement_x("option");
op.innerText = "请选择省";
op.value = "-1";
select.a(op);
for (var pro in dic) {
var option = document_createElement_x("option");
option.innerText = pro;
option.value = pro;
//option.selected = true;
select.a(option);
}
}
function selectCitys() {
var select = document.getElementById_x("pro");
var citySelect = document.getElementById_x("city");
var pro = select.value; //当前下拉列表中的值
if (pro == -1) {return;}
var citys = dic[pro];
//清空之前的数据 ArrayList
// for (var i = 0; i < citySelect.length; i++) {
// var op = citySelect.childNodes(i);
// citySelect.removeChild(op);
// }
for (var i = citySelect.length - 1; i >= 0; i--) {
var op = citySelect.childNodes(i);
citySelect.removeChild(op);
}
for (var i = 0; i < citys.length; i++) {
var option = document_createElement_x("option");
option.innerText = citys[i];
citySelect.a(option);
}
}
</script>
</head>
<body οnlοad="init()">
<select id="pro" οnchange=" selectCitys()">
</select>
<select id="city">
</select>
</body>
</html>