下拉框点击事件后把隐藏的多种框显示出来（包括不在同行的下拉框，文本框）

比如说我有一个下拉框A（value：0,1,2），还有其它的下拉框B，文本框C。
进入时默认看不到B,C。选择A为0,1时也看不到B,C   选择A值为2时能同时显示B,C供填。源码如下（进去不能看到类型，设备号，人数。选择机器值为3，可以显示出来类型，设备号，人数），我写了总测不过去，谢谢帮助：
<tr>
<td class="formLabel">地区</td>
<td class="formField">
<db:textField id="aear" fieldName="aear" 
onKeyPress="return onlyNumberByParam(this,10,2);"/>
</td>
<td class="formLabel">机器</td>
<td class="formField">
<db:select fieldName="device" id="rent_device">
<db:staticData name="get_rent_device">
<db:staticDataItem key="0" value="不区分"/>
<db:staticDataItem key="1" value="未做过的不能参与"/>
<db:staticDataItem key="2" value="做过的不能参与"/>
<db:staticDataItem key="3" value="能参与的"/>
</db:staticData>
</db:select>
</td>
</tr> <tr>
<td class="formLabel">标识</td>
<td class="formField">
<db:textField id="flag" fieldName="flag" maxlength="2" 
onBlur="checkNumberValues(this,'ck_number','BBB')"
onKeyPress="return check_num(event.keyCode,'ck_number',this);" style="ime-mode:disabled"/>
</td>

<td class="formLabel">类型</td>
<td class="formField">
<db:select id="type" fieldName="type">
<db:staticData name="type">
<db:staticDataItem key="0" value="不区分" />
<db:staticDataItem key="1" value="XXX" />
<db:staticDataItem key="2" value="YYY" />
<db:staticDataItem key="3" value="ZZZ" />
  <db:staticDataItem key="4" value="AAA" />
</db:staticData>
</db:select>
</td>
</tr>
<tr>
<td class="formLabel">设备号</td>
<td class="formField">
<db:textField id="device_type" fieldName="device_type" maxlength="1000" 
onBlur="checkNumberValues(this,'ck_str','设备号')"
 style="ime-mode:disabled"/>
</td>
</tr>
<tr>
<td class="formLabel">人数</td>
<td class="formField">
<db:textField id="limit_time" fieldName="limit_time"  
onKeyPress="return onlyNumberByParam(this,10,2);"/>
</td>
</tr>隐藏

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    [show='2']{
    display:none;
    }
    </style>
    <script type="text/javascript">
    function init(){
    var se=document.getElementById("test");
    se.onchange=function(){
    var index=se.selectedIndex;
    var ele=document.getElementsByTagName("*");
    for(var i=0;i<ele.length;i++){
    if(ele[i].getAttribute("show")){
    if(ele[i].getAttribute("show")==index){
    ele[i].style.display="inline";
    }else{
    ele[i].style.display='none';
    }
    }
    }
    }
    }
    window.onload=init;
    </script>
    </head><body>
    <select id="test">
    <option>0</option>
        <option>1</option>
        <option>2</option>
    </select>
    <select show="2">
    <option>测试0</option>
        <option>测试1</option>
        <option>测试2</option>
    </select>
    <input type="text" show="2">
    </body>
    </html>
    类似这样试试