我的下拉選項顯示按鈕時，它不應該

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 
}