我的下拉选项显示按钮时，它不应该

Question

我的下拉功能有一个小问题。假设发生的是，如果（optionDrop [0] .value ==“”）（这是“Please Select”选项，我在该函数中添加注释以便知道问题出在哪里），然后不要显示按钮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 
}