关于select 与 checkbox 联动。再加上个特殊效果。不知道该如何实现
日期：2014-05-16 浏览次数：20368 次
关于select 与 checkbox 联动。再加上个特殊效果。不知道该怎么实现。
现在有这样一个需求：要选择工作地区，有一个select，用来选择省份，选中省份之后，出现该省份下面的所有市，以checkbox的形式出现，可多选。。
每选中一个市，就把这个checkbox的值（value属性）显示到下面，选几个就显示几个，每个值之间用2个空格格开代码如下:
现在有这样一个需求：要选择工作地区，有一个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,上海">上海 <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="checkbo
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
