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

<html>
<head>
<script language="JavaScript" type="text/javascript"> 
function getNum(v){  
 for(var i=0;i<4;i++){
   document.getElementById(i).style.display ="none";
 }
 document.getElementById(v).style.display ="";
} 
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> 
</hrad> 
<body> 
<form method="post" name="form1"> 
<select name="num" onChange="getNum(this.value)"> 
<option value="0">请选择</option> 
<option value="1">1</option> 
<option value="2">2</option>
<option value="3">3</option>  
</select> 
<div id="0" style="display:none;"></div>
<div id="1" style="display:none;">
<input type="checkbox" value="11">11<input type="checkbox" value="12">12<input type="checkbox" value="13">13
</div> 
<div id="2" style="display:none;">
<input type="checkbox" value="21">21<input type="checkbox" value="22">22<input type="checkbox" value="23">23
</div>
<div id="3" style="display:none;">
<input type="checkbox" value="31">31<input type="checkbox" value="32">32<input type="checkbox" value="33">33
</div>
<div id="SelVa"></div>
</form> 
</body> 
</html>

解决方案 »

  1.   

    我没加什么代码啊,就是加了个document.onclick事件处理,和给checkbox加了value属性.还有就是改了下getNum函数.
      

  2.   

    也就是说，我把自己的script部分替换成你的,然后下面加个用来显示的层就可以了是吗?--<div id="SelVa"></div>可是它老是报错,说是"缺少对象"。另：我的实际代码是这个样子的
    <html>
    <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<4;i++)
     {
       document.getElementById(i).style.display ="none";
      }
    } </script>
    <link href="css.css" rel="stylesheet" type="text/css"> 
    </hrad> 
    <body> <form method="post" name="form1"> 
    <input type="hidden" name="flag" value="yes">
    <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="上海">上海&nbsp;<input type="checkbox" name="area" value="北京">北京&nbsp;<input type="checkbox" name="area" value="天津">天津&nbsp;<input type="checkbox" name="area" value="重庆">重庆
    </div> 
    <div id="2" style="display:none;">
    <input type="checkbox" name="area" value="山东济南">济南&nbsp;<input type="checkbox" name="area" value="山东青岛">青岛&nbsp;<input type="checkbox" name="area" value="山东淄博">淄博&nbsp;<input type="checkbox" name="area" value="山东枣庄">枣庄&nbsp;<input type="checkbox" name="area" value="山东东营">东营&nbsp;<input type="checkbox" name="area" value="山东烟台">烟台&nbsp;<input type="checkbox" name="area" value="山东潍坊">潍坊&nbsp;<input type="checkbox" name="area" value="山东济宁">济宁&nbsp;<input type="checkbox" name="area" value="山东泰安">泰安&nbsp;<input type="checkbox" name="area" value="山东威海">威海&nbsp;<input type="checkbox" name="area" value="山东日照">日照&nbsp;<input type="checkbox" name="area" value="山东莱芜">莱芜&nbsp;<input type="checkbox" name="area" value="山东临沂">临沂&nbsp;<input type="checkbox" name="area" value="山东德州">德州&nbsp;<input type="checkbox" name="area" value="山东聊城">聊城&nbsp;<input type="checkbox" name="area" value="山东滨州">滨州&nbsp;<input type="checkbox" name="area" value="山东菏泽">菏泽
    </div>
    <div id="3" style="display:none;">
    <input type="checkbox" name="area" value="河北邯郸">邯郸&nbsp;<input type="checkbox" name="area" value="河北邢台">邢台&nbsp;<input type="checkbox" name="area" value="河北保定">保定&nbsp;<input type="checkbox" name="area" value="河北承德">承德&nbsp;<input type="checkbox" name="area" value="河北廊坊">廊坊&nbsp;<input type="checkbox" name="area" value="河北唐山">唐山&nbsp;<input type="checkbox" name="area" value="河北沧州">沧州&nbsp;<input type="checkbox" name="area" value="河北衡水">衡水&nbsp;<input type="checkbox" name="area" value="河北石家庄">石家庄&nbsp;<input type="checkbox" name="area" value="河北张家口">张家口&nbsp;<input type="checkbox" name="area" value="河北秦皇岛">秦皇岛
    </div>
    <br>
    <input type="submit" value="选择完成">
    </form> </body> 
    </html>
      

  3.   

    你都没把document.onclick的js处理函数和显示选中的值的控件(我的是div)加上....<html>
    <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<4;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>
    <link href="css.css" rel="stylesheet" type="text/css"> 
    </hrad> 
    <body> <form method="post" name="form1"> 
    <input type="hidden" name="flag" value="yes">
    <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="上海">上海&nbsp;<input type="checkbox" name="area" value="北京">北京&nbsp;<input type="checkbox" name="area" value="天津">天津&nbsp;<input type="checkbox" name="area" value="重庆">重庆
    </div> 
    <div id="2" style="display:none;">
    <input type="checkbox" name="area" value="山东济南">济南&nbsp;<input type="checkbox" name="area" value="山东青岛">青岛&nbsp;<input type="checkbox" name="area" value="山东淄博">淄博&nbsp;<input type="checkbox" name="area" value="山东枣庄">枣庄&nbsp;<input type="checkbox" name="area" value="山东东营">东营&nbsp;<input type="checkbox" name="area" value="山东烟台">烟台&nbsp;<input type="checkbox" name="area" value="山东潍坊">潍坊&nbsp;<input type="checkbox" name="area" value="山东济宁">济宁&nbsp;<input type="checkbox" name="area" value="山东泰安">泰安&nbsp;<input type="checkbox" name="area" value="山东威海">威海&nbsp;<input type="checkbox" name="area" value="山东日照">日照&nbsp;<input type="checkbox" name="area" value="山东莱芜">莱芜&nbsp;<input type="checkbox" name="area" value="山东临沂">临沂&nbsp;<input type="checkbox" name="area" value="山东德州">德州&nbsp;<input type="checkbox" name="area" value="山东聊城">聊城&nbsp;<input type="checkbox" name="area" value="山东滨州">滨州&nbsp;<input type="checkbox" name="area" value="山东菏泽">菏泽
    </div>
    <div id="3" style="display:none;">
    <input type="checkbox" name="area" value="河北邯郸">邯郸&nbsp;<input type="checkbox" name="area" value="河北邢台">邢台&nbsp;<input type="checkbox" name="area" value="河北保定">保定&nbsp;<input type="checkbox" name="area" value="河北承德">承德&nbsp;<input type="checkbox" name="area" value="河北廊坊">廊坊&nbsp;<input type="checkbox" name="area" value="河北唐山">唐山&nbsp;<input type="checkbox" name="area" value="河北沧州">沧州&nbsp;<input type="checkbox" name="area" value="河北衡水">衡水&nbsp;<input type="checkbox" name="area" value="河北石家庄">石家庄&nbsp;<input type="checkbox" name="area" value="河北张家口">张家口&nbsp;<input type="checkbox" name="area" value="河北秦皇岛">秦皇岛
    </div>
    <div id="SelVa"></div><!-----这里,如果要提交改为input,type为text,注意id为SelVa,name的话你自己取-------->
    <br>
    <input type="submit" value="选择完成">
    </form> </body> 
    </html>