简明现代魔法 -> 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外的所有层都隐藏掉。