如何根据复选框显示不同的下拉菜单?

时间:2012-06-08 19:15:23

标签: javascript asp.net

我有一个复选框项目,其中一个名为nocalls和几个下拉列表框。

下面是下拉框:

<tr>
                                        <td align="right"><FONT class="Arial10"><B>Profile<font color="#ff0000">*</font></B></FONT></td>
                                        <td>
                                        <asp:dropdownlist id="eProfile" runat="server" Width="144px">
                                                <asp:listitem Value="" Selected="True">--Select A Profile--</asp:listitem>
                                                <asp:listitem Value="Add Profile">Add Profile</asp:listitem>
                                                <asp:listitem Value="Delete Profile">Delete Profile</asp:listitem>
                                                <asp:listitem Value="Update Profile">Update Profile</asp:listitem>
                                                <asp:listitem Value="Transfer">Transfer</asp:listitem>
                                                <asp:listitem Value="See Notes">See Notes</asp:listitem>
                                            </asp:dropdownlist>
                                      </td>
                                    </tr>
                                    <TR>
                                        <td align="right"><FONT class="Arial10"><B>Profile<font color="#ff0000">*</font></B></FONT></td>
                                        <td>
                                        <asp:dropdownlist id="kProfile" runat="server" Width="144px">
                                                <asp:listitem Value="" Selected="True">--Select A Profile--</asp:listitem>
                                                <asp:listitem Value="Add Manager Profile">Add Manager Profile</asp:listitem>
                                                <asp:listitem Value="Add User Profile">Add User Profile</asp:listitem>
                                                                    </asp:dropdownlist>
                                      </td>
                                    </TR>

以下是复选框列表

                                            <input id="CheckBox9" runat="server" type="checkbox" value="Notary" />Notary
                                                <input id="CheckBox10" runat="server" type="checkbox" value="VPN"  />VPN
                                                <input id="CheckBox11" runat="server" type="checkbox" value="VPSPagecenter"  />VPS-Pagecenter
                                                <input id="CheckBox12" runat="server" type="checkbox" value="PCDOC"  />PC DOC
                                            <input id="CheckBox13" runat="server" type="checkbox" value="nocalls" />nocalls

如果用户选中nocalls复选框,我们希望在隐藏eProfile下拉列表时仅显示kProfile下拉列表。

如果用户单击一个或多个复选框但未单击nocalls复选框,则会在显示eProfile下拉列表时隐藏kProfile dropdwn。

我尝试使用Javascript来执行此操作,但我一直看到2个下拉列表。

我知道我在做一些非常愚蠢的事。

if (theForm.service.value.indexOf("nocalls") >= 0) {

    var kprofobj = document.getElementById("kProfile");
    var eprofobj = document.getElementById("eProfile");

        kprofobj.style.visiblilty = "visible";
        eprofobj.style.visiblilty = "hidden";
        kprofobj.style.display = "block";

}



<script type="text/javascript"> 
   $(document).ready(function () {
    if ($('#nocalls').attr('checked')) { 
        $('#eProfile').hide(); 
        $('#kProfile').show() 
    }; 
    });
</script>

1 个答案:

答案 0 :(得分:0)

对于复选框,不要查找值,查找CHECKED属性。

if (theForm.service.checked)

if (theForm.service.value.indexOf("nocalls") >= 0) 

P.S。基于表格的布局和内联样式是邪恶的。

P.P.S .NET附带jQuery,允许您在没有其他JS代码的情况下执行$('#kProfile').hide() / $('#kProfile').show()