<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var cityarr=[
['石家庄','唐山','邢台','保定'],
['葫芦岛','沈阳'],
['济南','青岛']
];
function change(){
var index=document.getElementById('pro').value;
var citys=cityarr[index];
//清空city的列表
var cityoptions=document.getElementById('city').options;
for(var j=cityoptions.length-1;j>=1;j--){
document.getElementById('city').removeChild(cityoptions[j]);
}
//添加对应的城市
for(var i=0;i<citys.length;i++){
var option=document.createElement('option');
option.innerHTML=citys[i];
document.getElementById('city').appendChild(option);
}
}
</script>
</head>
<body>
<select name="" id="pro" οnchange="change()">
<option value="">==所在省==</option>
<option value="0">河北</option>
<option value="1">辽宁</option>
<option value="2">山东</option>
</select>省
<select name="" id="city">
<option value="">==所在市==</option>
</select>市
</body>
</html>