<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//定义二维数组 接受省份对应的市
var cityarr=[
['石家庄','保定','唐山'],
['郑州','洛阳'],
['太原','大同','忻州'],
];
function change(){
//获取省的值 用变量index接受
var index=document.getElementById('prov').value;
//获取每个省对应的市
var citys=cityarr[index];
//获取城市集合options
var cop=document.getElementById('city').options;
for(var i=cop.length-1;i>=1;i--){
//给每个除了不是本省的出去其他市
document.getElementById('city').removeChild(cop[i]);
}
for(var j=0;j<citys.length;j++){
//给每个省份对应的市 添加 元素 元素里边放value 值
var option=document.createElement('option');
option.innerHTML=citys[j];
//给每个市添加节点
document.getElementById('city').appendChild(option);
}
}
</script>
</head>
<body>
<!-- 定义函数 change 当发生改变市 市随着省改变而改变 -->
<select name="" id="prov" οnchange="change()">
<option value="">所在省</option>
<option value="0">河北省</option>
<option value="1">河南省</option>
<option value="2">山西省</option>
</select>
<select id="city">
<option value="0">所在市</option>
</select>
</body>
</html>