怎样在select里选择一个内容后,另一个select里的内容就会变成另一组

<form name=form1>
<select name=province onchange="cityName(this.selectedIndex)">
  <option value="">请选择省名</option>
</select><select name=city>
  <option value="">请选择城名</option>
</select>
</form><script language=javascript>var provinceName = ["浙江", "江苏", "安徽", "江西"];
var city1 = ["杭州", "宁波", "温州", "绍兴", "金华", "湖州"];
var city2 = ["南京", "苏州", "无锡", "常州", "镇江", "徐州"];
var city3 = ["合肥", "翕县", "黄山", "祁门", "休宁"];
var city4 = ["南昌", "九江", "赣州", "上饶", "新余", "景德镇"]; 
function province()
{    var e = document.form1.province;
    for (var i=0; i<provinceName.length; i++)
       e.options.add(new Option(provinceName[i], provinceName[i]));
}
function cityName(n)
{
    var e = document.form1.city;
    for (var i=e.options.length; i>0; i--)  e.remove(i);
    if (n == 0) return;
    var a = eval("city"+ n); //得到城市的数组名
    for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i]));
}
function window.onload()
{
    province(); //初始时给省名下拉框赋内容
}
</script>