简明现代魔法 -> JavaScript -> 下拉框与Checkbox联动设计

下拉框与Checkbox联动设计

2010-05-31

现在有这样一个需求:要选择工作地区,有一个select,用来选择省份,选中省份之后,出现该省份下面的所有市,以checkbox的形式出现,可多选。

效果演示

程序代码

<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<4;i++)
 	{
   		document.getElementById(i).style.display ="none";
  	}
} 
</script> 

<form method="post" name="form1"> 
<select name="num" onChange="getNum()"> 
<option value="0">请选择</option> 
<option value="1">PHP区</option> 
<option value="2">Ajax区</option>
<option value="3">CSS区</option>  
</select> 
<div id="0" style="display:none;"></div>
<div id="1" style="display:none;">
<input type="checkbox" />PHP区文章一 <input type="checkbox" />PHP区文章二 <input type="checkbox" />PHP区文章三
</div> 
<div id="2" style="display:none;">
<input type="checkbox" />Ajax区文章一 <input type="checkbox" />Ajax区文章二 <input type="checkbox" />Ajax区文章三
</div>
<div id="3" style="display:none;">
<input type="checkbox" />CSS区文章一 <input type="checkbox" />CSS区文章二 <input type="checkbox" />CSS区文章三
</div>
</form> 

程序设计思路如下:获取下拉选项的值,然后把该值作为层的 id,除了此id外的所有层都隐藏掉。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们