Question

我的下拉功能有点问题。假设发生的是if（optionDrop [0] .value ==“”）（这是下拉菜单中的“请选择”选项，我在函数中添加注释，以便您知道问题所在），然后不显示按钮A，B或C.当页面打开时，预选值为“”，但是当我点击下拉菜单或再次选择值“”时，它会显示按钮B和C并且仅显示A.按钮A，B和C应该不显示。为什么会这样？

下面是功能（我把问题放在哪里评论）

        function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var na = document.getElementById("na");
var numberDrop = document.getElementsByName("numberDrop");
var answer = document.getElementsByName("answer");

if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
numberDrop[0].style.display = "block";
na.style.display = "none";

                }

    // THIS IS THE PROBLEM

else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){         
numberDrop[0].style.display = "none";
na.style.display = "block";

}else if (optionDrop[0].value == ""){           
numberDrop[0].style.display = "none";
na.style.display = "none";
answer[0].style.display = "none";
answer[1].style.display = "none";
answer[2].style.display = "none";           
                            }         


if (optionDrop[0].value == "abc" && numberDrop[0].value == "1")
answer[0].style.display = "block";
answer[1].style.display = "block";
answer[2].style.display = "block";
                        }

下面是下拉菜单和按钮的HTML：

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" >
<table id="middleDetails" border="1">
<tr>
      <th colspan="2">
        Option and Answer
    </th>
</tr>
<tr>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onClick="getDropDown()>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td>Answer</td>
<td>
<input class="answerBtns" name="answer" type="button" value="A" />
<input class="answerBtns" name="answer" type="button" value="B" />
<input class="answerBtns" name="answer" type="button" value="C" />
<input class="answerBtns" name="answer" type="button" value="D" />
<input class="answerBtns" name="answer" type="button" value="E" />
<input class="answerBtns" name="answer" type="button" value="True" />
<input class="answerBtns" name="answer" type="button" value="False" />
<input class="answerBtns" name="answer" type="button" value="Yes" />
<input class="answerBtns" name="answer" type="button" value="No" />
</td>
</tr>
</table>
</form>

下面是CSS;

.answerBtns{
    display:none;
    }

Answer 1

您在javascript函数末尾的if语句中缺少一组大括号：

if (optionDrop[0].value == "abc" && numberDrop[0].value == "1")
answer[0].style.display = "block";   // conditionally executed
answer[1].style.display = "block";   // always executed
answer[2].style.display = "block";   // always executed

因此，始终执行最后两个语句，并始终显示B和C按钮。你想要这样的东西：

if (optionDrop[0].value == "abc" && numberDrop[0].value == "1")
{
  answer[0].style.display = "block";   // conditionally executed
  answer[1].style.display = "block";   // conditionally executed
  answer[2].style.display = "block";   // conditionally executed
}

我的下拉选项显示按钮时不应该这样做

1 个答案: