Question

我正在处理多个javascript if / else语句，但它们似乎无法正常工作。只有最后一部分＆＃34;目前已注册＆＃34;工作中。当用户从下拉列表中选择时，我希望同时使用Yes和当前注册的语句。我的代码如下：

function testBSN() {

if (document.getElementById('BSN').value == 'Yes') {
   document.getElementById('BSNQuestion'}.style.display = 'table-row';


} else {
   document.getElementById('BSNQuestion').style.display = 'none';
}   

if (document.getElementById('BSN').value == 'Yes') {
    document.getElementById('NSG_Grad_Yr').style.display = 'block';

} else {
   document.getElementById('NSG_Grad_Yr').style.display = 'none';
}   

if (document.getElementById('BSN').value == 'Yes') {
   document.getElementById('Est_NSG_School').style.display = 'block';

} else {
    document.getElementById('Est_NSG_School').style.display = 'none';
}   

if (document.getElementById('BSN').value == 'Currently Enrolled') {
   document.getElementById('BSNQuestion').style.display = 'table-row';


} else {
   document.getElementById('BSNQuestion').style.display = 'none';
}   

if (document.getElementById('BSN').value == 'Currently Enrolled') {
    document.getElementById('NSG_Grad_Yr').style.display = 'block';

} else {
   document.getElementById('NSG_Grad_Yr').style.display = 'none';
}   

if (document.getElementById('BSN').value == 'Currently Enrolled') {
   document.getElementById('Est_NSG_School').style.display = 'block';

    } else {
        document.getElementById('Est_NSG_School').style.display = 'none';
    }   
    }   


</script>

以下是该部分的HTML：

           <td style="padding-bottom: 10px" valign="top">  
                              <select name="BSN" size="1" id="BSN"     onclick='testBSN()'>
                                <option value="">Please Select</option>
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                                <option value="Currently Enrolled">Currently Enrolled</option>
                          </select></td>
                          </tr>

                        <tr id="BSNQuestion" style="background-color: #0082c8; display:none">
                          <td valign="top" ><span style="font-size: 14px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color: #FFFFFF;">Year of graduation?</span></td>
                          <td valign="top" >&nbsp;</td>
                          <td valign="top"><span style="font-size: 14px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color: #FFFFFF;">From what school?</span></td>
                        </tr>
                        <tr>
                          <td valign="top">  <select style="display:none" name="NSG_Grad_Yr" id="NSG_Grad_Yr">

                <option value="N/A">Please Select</option>


                <option value="1950">1950</option>
                <option value="1951">1951</option>
                <option value="1952">1952</option>
                <option value="1953">1953</option>
                <option value="1954">1954</option>
                <option value="1955">1955</option>

              </select></td>
                          <td valign="top">&nbsp;</td>
                          <td style="padding-bottom: 10px" valign="top"><input style="display:none" type="text" name="Est_NSG_School" id="Est_NSG_School" size="32" /></td>
                          </tr>

Answer 1

首先，你糟糕的代码缩进使得这个问题很难阅读和排除故障。我不仅要重新创建解决方案，还必须修复无效的HTML。在我认识到你的问题就是这个之前，所有这一切都是必要的---

你的第一个IF条件确实有效......

if (document.getElementById('BSN').value === 'Yes') {
  document.getElementById('BSNQuestion').style.display = 'table-row';
  document.getElementById('NSG_Grad_Yr').style.display = 'block';
  document.getElementById('Est_NSG_School').style.display = 'block';
} else {
  document.getElementById('BSNQuestion').style.display = 'none';
  document.getElementById('NSG_Grad_Yr').style.display = 'none';
  document.getElementById('Est_NSG_School').style.display = 'none';
}

......但是这种情况后来其效果会被逆转：

if (document.getElementById('BSN').value === 'Currently Enrolled') {
  document.getElementById('BSNQuestion').style.display = 'table-row';
  document.getElementById('NSG_Grad_Yr').style.display = 'block';
  document.getElementById('Est_NSG_School').style.display = 'block';

} else {
  document.getElementById('BSNQuestion').style.display = 'none';
  document.getElementById('NSG_Grad_Yr').style.display = 'none';
  document.getElementById('Est_NSG_School').style.display = 'none';
}

假设值==＆＃39;是＆＃39;然后你继续检查值==＆＃39;目前已注册＆＃39;。由于价值不是“目前注册的”＆＃39; （因为我们知道它是＆＃39;是＆＃39;）您仍会触发隐藏显示的其他条件（即使您希望它显示为＆＃39;是＆＃39;）。

要修复，请执行以下操作：

var answer = document.getElementById('BSN').value;
if (answer === 'Yes' || answer === 'Currently Enrolled') {
  document.getElementById('BSNQuestion').style.display = 'table-row';
  document.getElementById('NSG_Grad_Yr').style.display = 'block';
  document.getElementById('Est_NSG_School').style.display = 'block';
} else {
  document.getElementById('BSNQuestion').style.display = 'none';
  document.getElementById('NSG_Grad_Yr').style.display = 'none';
  document.getElementById('Est_NSG_School').style.display = 'none';
}

Fiddle >

Answer 2

你也可以使用else if。

function abc() {
 if (condition1) {
  // something happens
 } else if (condition2) {
  // something else happens
 } else {
  // runs if the if and else if do not execute
 }
}

Answer 3

我认为onclick =＆＃39; testBSN（）＆＃39;是一个创造问题。尝试onchange =＆＃39; testBSN（）＆＃39;

多个Javascript如果/ Else语句不起作用，则只执行最后一个

3 个答案: