首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-02-19 
关于select 与 checkbox 联动。再加上个特殊效果。不知道该怎么实现。现在有这样一个需求:要选择工作地区,有

关于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> 



id为"SelVa"的层的用来显示选择结果的,但是在我这个例子里,每一个checkbox的值是“数字,地名”这样的形式。如"32,河北秦皇岛" 但是,在显示的时候,只想显示地名,如,只显示“河北秦皇岛”,而不是显示“32,河北秦皇岛” 这个要怎么改?应该是要改JS代码里的某一句吧?我是菜鸟啊,帮帮忙,谢谢

[解决办法]
看看 是不是你要的结果:

<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.substring(tag.value.indexOf(',')+1)+" ";
}
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>

热点排行
Bad Request.