我的下拉选项显示按钮时,它不应该
问题描述:
我的下拉功能有一个小问题。假设发生的是,如果(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;
}
答
你在你的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
}