关于select 与 checkbox 联动。再加上个特殊效果。不知道该如何实现 _JavaScript

关于select 与 checkbox 联动。再加上个特殊效果。不知道该怎么实现。
现在有这样一个需求：要选择工作地区，有一个select，用来选择省份，选中省份之后，出现该省份下面的所有市，以checkbox的形式出现，可多选。。
每选中一个市，就把这个checkbox的值（value属性）显示到下面，选几个就显示几个，每个值之间用2个空格格开代码如下:

HTML code

<html>
<head>
<base target="_self">
<link href="css.css" rel="stylesheet" type="text/css"> 
</head>
<script language="JavaScript" type="text/javascript"> 
function getNum(){  
 var sNum=document.form1.num.selectedIndex; 
 document.getElementById(sNum).style.display ="block";
 for(var i=0;i<sNum;i++){
   document.getElementById(i).style.display ="none";
 }
 for(var i=sNum+1;i<30;i++)
 {
   document.getElementById(i).style.display ="none";
  }
} 
document.onclick=function(e)//==================这里
{
  e=e||event;
  var tag=e.target?e.target:e.srcElement;
  if(tag.type=="checkbox")
  {
    var sv=document.getElementById("SelVa");
    if(tag.checked)
    {
      sv.innerHTML+=tag.value+"  ";
    }
    else
    {
      sv.innerHTML=sv.innerHTML.replace(new RegExp(tag.value+"(  )?","i"),"");
    }
  }
}

</script> 
<body> 
<%quyu1=CHECKSTR(trim(request("quyu1")))
quyu2=CHECKSTR(trim(request("quyu2")))
fname=CHECKSTR(trim(request("fname")))%>
<form method="post" name="form1"> 
<input type="hidden" name="flag" value="yes">
<input type="hidden" name="quyu1" value="<%=quyu1%>">
<input type="hidden" name="quyu2" value="<%=quyu2%>">
<input type="hidden" name="fname" value="<%=fname%>">
<select name="num" onChange="getNum()"> 
<option value="0">请选择</option> 
<option value="直辖市">直辖市</option> 
<option value="山东">山东</option>
<option value="河北">河北</option>
</select> 
<div id="0" style="display:none;"></div>
<div id="1" style="display:none;" class="table">
<input type="checkbox" name="area" value="1,上海">上海&nbsp;<input type="checkbox" name="area" value="2,北京">北京&nbsp;<input type="checkbox" name="area" value="3,天津">天津&nbsp;<input type="checkbox" name="area" value="4,重庆">重庆
</div> 
<div id="2" style="display:none;">
<input type="checkbox" name="area" value="5,山东济南">济南&nbsp;<input type="checkbox" name="area" value="6,山东青岛">青岛&nbsp;<input type="checkbox" name="area" value="7,山东淄博">淄博&nbsp;<input type="checkbox" name="area" value="8,山东枣庄">枣庄&nbsp;<input type="checkbox" name="area" value="9,山东东营">东营&nbsp;<input type="checkbox" name="area" value="10,山东烟台">烟台&nbsp;<input type="checkbox" name="area" value="11,山东潍坊">潍坊&nbsp;<input type="checkbox" name="area" value="12,山东济宁">济宁&nbsp;<input type="checkbox" name="area" value="13,山东泰安">泰安&nbsp;<input type="checkbox" name="area" value="14,山东威海">威海&nbsp;<input type="checkbox" name="area" value="15,山东日照">日照&nbsp;<input type="checkbox" name="area" value="16,山东莱芜">莱芜&nbsp;<input type="checkbox" name="area" value="17,山东临沂">临沂&nbsp;<input type="checkbox" name="area" value="18,山东德州">德州&nbsp;<input type="checkbox" name="area" value="19,山东聊城">聊城&nbsp;<input type="checkbox" name="area" value="20,山东滨州">滨州&nbsp;<input type="checkbox" name="area" value="21,山东菏泽">菏泽
</div>
<div id="3" style="display:none;">
<input type="checkbox" name="area" value="22,河北邯郸">邯郸&nbsp;<input type="checkbox" name="area" value="23,河北邢台">邢台&nbsp;<input type="checkbox" name="area" value="24,河北保定">保定&nbsp;<input type="checkbox" name="area" value="25,河北承德">承德&nbsp;<input type="checkbox" name="area" value="26,河北廊坊">廊坊&nbsp;<input type="checkbox" name="area" value="27,河北唐山">唐山&nbsp;<input type="checkbox" name="area" value="28,河北沧州">沧州&nbsp;<input type="checkbox" name="area" value="29,河北衡水">衡水&nbsp;<input type="checkbox" name="area" value="30,河北石家庄">石家庄&nbsp;<input type="checkbox" name="area" value="31,河北张家口">张家口&nbsp;<input type="checkbox" name="area" value="32,河北秦皇岛">秦皇岛
</div>
<br>
<input type="submit" value="选择完成">
</form><br>
目前你选中的地区：<br>
<div id="SelVa"></div>
</body> 
</html>