0
我的下拉功能有一個小問題。假設發生的是,如果(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;
}