jquery EasyUI +MVC 页面有三个单选按钮,选择不停按钮展示不同的层,其他的隐藏

来源:互联网 发布:廖雪峰的python 编辑:程序博客网 时间:2024/05/21 03:26

<script type="text/javascript">

   function switchItem(tag) {
        var s1 = document.getElementById('div1');
        var s2 = document.getElementById('div2');
        var s3 = document.getElementById('div3');
        if (tag == '年') {
            s1.style.display = '';
            s2.style.display = 'none';
            s3.style.display = 'none';
        }
        if (tag == '月') {
            s1.style.display = 'none';
            s2.style.display = '';
            s3.style.display = 'none';
        }
        if (tag == '日') {
            s1.style.display = 'none';
            s2.style.display = 'none';
            s3.style.display = '';
        }


    }

</script>

            <table  style="width:100%; margin-top:5px;">
            <tr>
            <td><input id="cbYearForQualifiedRateStat6" name="txtStatTypeForQualifiedRateStat6" type="radio" value="1" onclick="switchItem('年')" checked/>年
                <input id="rdStatType1ForQualifiedRateStat6" name="txtStatTypeForQualifiedRateStat6" type="radio" value="2" onclick="switchItem('月')" />月
                <input id="rdStatType2ForQualifiedRateStat6" name="txtStatTypeForQualifiedRateStat6" type="radio" value="3" onclick="switchItem('日')"/>日
          </td> </tr>
        </table>
             <div id="div1" style=" width:180px;">
            <table style="width:100%; margin-top:5px;">
               <tr>
                <td>年份:</td>
                <td>
                <select class="easyui-combobox" id="cbYearContrast" name="select" panelHeight="auto" style=" width:80px; padding-top:5px; margin-top:10px;"></select>
               </td>
           </tr>
            </table>
           </div>
            <div id="div2" style=" width:520px; display:none">
            <table style="width:100%; margin-top:5px;">
                <tr>
                <td>年份:</td>
                <td style=" padding-left:10px;">
             <select class="easyui-combobox" id="cbYearContrast1" name="select" panelHeight="auto" style=" width:80px; padding-top:5px; margin-top:10px;">
              </select>
                
                </td>
                <td>月份:</td>
                 <td><select class="easyui-combobox" id="cMonthContrast1" name="select" panelHeight="auto" style=" width:80px; padding-top:5px; margin-top:10px;">
                    @{
                    <option id="-1" value = "-1">所有</option>
                        for (var i = 1; i <= 12; i++)
                        {
                        <option id=@i value = @i>@i 月</option>
                        }
                            
                    }
                    </select>
                </td>
                <td>--</td>
                 <td>年份:</td>

                <td style=" padding-left:10px;">

<select class="easyui-combobox" id="cbYearContrast2" panelHeight="auto" style=" width:80px; padding-top:5px; margin-top:10px;"> </select>

                </td>
                <td>月份:</td>
                 <td><select class="easyui-combobox" id="cMonthContrast2" panelHeight="auto" style=" width:80px; padding-top:5px; margin-top:10px;">
                    @{
                    <option id="-1" value = "-1">所有</option>
                        for (var i = 1; i <= 12; i++)
                        {
                        <option id=@i value = @i>@i 月</option>
                        }
                            
                    }
                    </select>
                </td>
         </tr>
            </table>
            </div>
            <div id="div3" style=" width:380px; display:none;">
            <table style="width:100%; margin-top:5px;">
                <tr>
                <td>开始日期:</td>
                <td style=" padding-left:10px;"><input class="easyui-datetimebox" type="text" id="dtbStartTimeContrast" showSeconds="true" style="width: 100px;"/>
                </td>
                <td>结束日期:</td>
                 <td><input class="easyui-datetimebox" type="text" id="dtbEndTimeContrast" showSeconds="true" style="width: 100px;"/> 
                </td>
           
         </tr>
            </table>
            </div>

原创粉丝点击