2

我一直在尝试将“选择”列表与 javascript 一起使用。我做了一个隐藏或显示部分 html 代码的 Javascript 函数，但它以相反的方式工作，我无法弄清楚我哪里出错了，因为代码似乎是直截了当的。

我的 JS 函数是

<script type="text/javascript" language="javascript">       


    function toggle(id) {

        if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')
        {
            if(document.getElementById('dv1').style.display=='block')
            {
                document.getElementById('dv1').style.display='none';
                document.getElementById('dv1').style.visibility='hidden';
            }
        }
        else 
        {
            document.getElementById('dv1').style.display='block';
            document.getElementById('dv1').style.visibility='visible';
            //alert('Its displaying now');
        }


        if(document.getElementById(id).value=='Other')
        {
            if(document.getElementById('dv2').style.display=='block')
            {
                document.getElementById('dv2').style.display='none';
                document.getElementById('dv2').style.visibility='hidden';
            }

        }
        else 
        {
            document.getElementById('dv2').style.display='block';
            document.getElementById('dv2').style.visibility='visible';
        }


        if(document.getElementById(id).value=='none')
        {
                document.getElementById('dv1').style.display='none';
                document.getElementById('dv1').style.visibility='hidden';
                document.getElementById('dv2').style.display='none';
                document.getElementById('dv2').style.visibility='hidden';
        }



    }
</script>

问题是第一个“if”语句显示/隐藏“dv2”而不是“dv1”，第二个“if”语句显示/隐藏“dv1”而不是“dv2”，尽管所有内容都是这样指定的第一个“if”语句处理“dv1”，第二个“if”语句处理“dv2”

我在理解 JS 的工作原理方面是否遗漏了一些东西..

这里预定义了一个样式来隐藏 html 代码

<style type="text/css">
.toggleClass{
    display:none; 
    visibility:hidden;
    } 
</style>
</head>



<body>

<form name="myform" >

这是我在更改时调用 JS 函数的选择

    <select id="exam" name="exam" onchange="toggle('exam')">
    <option selected="selected" value="none" >Please Choose</option>
    <option value="IELTS">IELTS</option>
    <option value="TOEFL">TOEFL</option>
    <option value="Other">Other</option>
    </select>   
  <br><br>

这是dv1

<div id="dv1" class="toggleClass">
    <table width="50%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="600" bgcolor="#CCCCCC">IELTS and TOEFL</td>
      </tr>
    </table>
</div>

这是dv2

<div id="dv2" class="toggleClass">
    <table width="50%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="600" bgcolor="#CCCCCC">Other</td>
      </tr>
    </table>
</div>
</form>
</body>
</html>

请注意，如果我交换“dv1”和“dv2”，它工作正常！

4

2 回答 2

0

考虑这段代码：-

if(document.getElementById(id).value=='Other')
        {
            if(document.getElementById('dv2').style.display=='block')
            {
                document.getElementById('dv2').style.display='none';
                document.getElementById('dv2').style.visibility='hidden';
            }

        }
        else 
        {
            document.getElementById('dv2').style.display='block';
            document.getElementById('dv2').style.visibility='visible';
        }

从这里很明显，如果您选择“其他”，那么在这种情况下，div 2 将永远不会出现。因为条件为真，因为下面提到的 else 条件：-

else 
        {
            document.getElementById('dv1').style.display='block';
            document.getElementById('dv1').style.visibility='visible';
            //alert('Its displaying now');
        }

将显示您已验证的 div1。您正在寻找的脚本必须如下所述：-

<script type="text/javascript" language="javascript">       


    function toggle(id) {

        if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')
        {
            if(document.getElementById('dv1').style.display=='block')
            {
               document.getElementById('dv1').style.display='block';
                document.getElementById('dv1').style.visibility='visible';

            }
        }
        else 
        {

document.getElementById('dv1').style.display='none';

            document.getElementById('dv1').style.visibility='hidden';
            //alert('Its displaying now');
        }


        if(document.getElementById(id).value=='Other')
        {
            if(document.getElementById('dv2').style.display=='block')
            {
                document.getElementById('dv2').style.display='block';
               document.getElementById('dv2').style.visibility='visible';
            }

        }
        else 
        {
            document.getElementById('dv2').style.display='none';
            document.getElementById('dv2').style.visibility='hidden';

        }


        if(document.getElementById(id).value=='none')
        {
                document.getElementById('Table1').style.display='none';
                document.getElementById('Table1').style.visibility='hidden';
                document.getElementById('Table2').style.display='none';
                document.getElementById('Table2').style.visibility='hidden';
        }



    }
</script>

试试这个，让我知道它是否有效。

于 2012-09-24T08:46:56.787 回答
0

FIRST：仅当该属性有内联样式时才设置样式属性。

所以在你的 div 你应该插入一个样式属性

<div id="dv1" class="toggleClass" style="visibility:hidden; display:none">

div2 也一样

在那之后......逻辑似乎不正确：

if(document.getElementById(id).value=='IELTS' || document.getElementById(id).value=='TOEFL')

此行应该在第一个 div ( div1) 处可见，但在此之后：

document.getElementById('dv1').style.display='none';
document.getElementById('dv1').style.visibility='hidden';

你把它藏起来！

于 2012-09-24T09:00:42.387 回答