关于select 与 checkbox 联动。再加上个特殊效果。不知道该怎么实现。
现在有这样一个需求:要选择工作地区,有一个select,用来选择省份,选中省份之后,出现该省份下面的所有市,以checkbox的形式出现,可多选。。
每选中一个市,就把这个checkbox的值(value属性)显示到下面,选几个就显示几个,每个值之间用2个空格格开代码如下:
<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,上海">上海 <input type="checkbox" name="area" value="2,北京">北京 <input type="checkbox" name="area" value="3,天津">天津 <input type="checkbox" name="area" value="4,重庆">重庆</div> <div id="2" style="display:none;"><input type="checkbox" name="area" value="5,山东济南">济南 <input type="checkbox" name="area" value="6,山东青岛">青岛 <input type="checkbox" name="area" value="7,山东淄博">淄博 <input type="checkbox" name="area" value="8,山东枣庄">枣庄 <input type="checkbox" name="area" value="9,山东东营">东营 <input type="checkbox" name="area" value="10,山东烟台">烟台 <input type="checkbox" name="area" value="11,山东潍坊">潍坊 <input type="checkbox" name="area" value="12,山东济宁">济宁 <input type="checkbox" name="area" value="13,山东泰安">泰安 <input type="checkbox" name="area" value="14,山东威海">威海 <input type="checkbox" name="area" value="15,山东日照">日照 <input type="checkbox" name="area" value="16,山东莱芜">莱芜 <input type="checkbox" name="area" value="17,山东临沂">临沂 <input type="checkbox" name="area" value="18,山东德州">德州 <input type="checkbox" name="area" value="19,山东聊城">聊城 <input type="checkbox" name="area" value="20,山东滨州">滨州 <input type="checkbox" name="area" value="21,山东菏泽">菏泽</div><div id="3" style="display:none;"><input type="checkbox" name="area" value="22,河北邯郸">邯郸 <input type="checkbox" name="area" value="23,河北邢台">邢台 <input type="checkbox" name="area" value="24,河北保定">保定 <input type="checkbox" name="area" value="25,河北承德">承德 <input type="checkbox" name="area" value="26,河北廊坊">廊坊 <input type="checkbox" name="area" value="27,河北唐山">唐山 <input type="checkbox" name="area" value="28,河北沧州">沧州 <input type="checkbox" name="area" value="29,河北衡水">衡水 <input type="checkbox" name="area" value="30,河北石家庄">石家庄 <input type="checkbox" name="area" value="31,河北张家口">张家口 <input type="checkbox" name="area" value="32,河北秦皇岛">秦皇岛</div><br><input type="submit" value="选择完成"></form><br>目前你选中的地区:<br><div id="SelVa"></div></body> </html>
宁 <input type="checkbox" name="area" value="13,山东泰安">泰安 <input type="checkbox" name="area" value="14,山东威海">
威海 <input type="checkbox" name="area" value="15,山东日照">日照 <input type="checkbox" name="area" value="16,山东莱
芜">莱芜 <input type="checkbox" name="area" value="17,山东临沂">临沂 <input type="checkbox" name="area" value="18,山东
德州">德州 <input type="checkbox" name="area" value="19,山东聊城">聊城 <input type="checkbox" name="area" value="20,山
东滨州">滨州 <input type="checkbox" name="area" value="21,山东菏泽">菏泽
</div>
<div id="3" style="display:none;">
<input type="checkbox" name="area" value="22,河北邯郸">邯郸 <input type="checkbox" name="area" value="23,河北邢台">邢台
<input type="checkbox" name="area" value="24,河北保定">保定 <input type="checkbox" name="area" value="25,河北承德">承
德 <input type="checkbox" name="area" value="26,河北廊坊">廊坊 <input type="checkbox" name="area" value="27,河北唐山">
唐山 <input type="checkbox" name="area" value="28,河北沧州">沧州 <input type="checkbox" name="area" value="29,河北衡
水">衡水 <input type="checkbox" name="area" value="30,河北石家庄">石家庄 <input type="checkbox" name="area" value="31,
河北张家口">张家口 <input type="checkbox" name="area" value="32,河北秦皇岛">秦皇岛
</div>
<br>
<input type="submit" value="选择完成">
</form><br>
目前你选中的地区:<br>
<div id="SelVa"></div>
</body>
</html>