日期:2014-05-16  浏览次数:20400 次

关于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="checkbo