javascript - 在特定值时下拉不显示内容

Question

我正在尝试在值为 2 时制作一个下拉菜单显示我的其他 div。现在我的下拉菜单是“事件有证人吗？”然后有两个选项“否”为值 1，"is"为值 2。因此，如果选择值 2"is"，则会显示另外两个问题“证人姓名”和“证人联系电话”。但我似乎无法弄清楚为什么它不起作用，任何人都可以弄清楚为什么会这样吗？

再次感谢，

马特。

$(window).on("load", function() {
  $('p select[name=dd_1]').change(function(e) {
    if ($('p select[name=dd_1]').val() == '2') {
      $('#irMainWitness').show();
      $('#irQMainWitness').show();
      $('#irBottomWitness').show();
    } else {
      $('#irMainWitness').hide();
      $('#irQMainWitness').hide();
      $('#irBottomWitness').hide();
    }
  });
});

p {
  margin: 0;
}
textarea {
  overflow: hidden;
  resize: none;
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  height: 40px;
  width: 98%;
  margin: 0;
  background: #fff;
}
.dropDown {
  width: 99.5%;
  height: 46px;
  margin: 0;
  border: none;
  background: none;
}
#irMain {
  background-color: #ddebf7;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 30px;
}
#irQMain {
  background-color: #FFF;
  border: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 50px;
}
#irMainWitness {
  background-color: #ddebf7;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 30px;
  display: none;
}
#irQMainWitness {
  background-color: #FFF;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 50px;
  display: none;
}
#irBottomWitness {
  background-color: #FFF;
  border: 2px solid #000;
  height: 50px;
  margin: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
  <p>Was there a Witness to the Incident?:</p>
</div>
<div id="irQMain">
  <select name="dd_1" class="dropDown">
    <option value="1">No</option>
    <option value="2">Yes</option>
  </select>
</div>

<div id="irMainWitness">
  <p>Name of Witness:</p>
</div>

<div id="irQMainWitness">
  <textarea name="tb_16" cols="1" rows="2"></textarea>
</div>

<div id="irMainWitness">
  <p>Contact Number of Witness:</p>
</div>

<div id="irBottomWitness">
  <textarea name="tb_17" cols="1" rows="2"></textarea>
</div>

Answer 1

您只需要确保您的选择器是正确的，您可以通过将您的名称值明确地用引号括在您的选择器中而不是将其范围限定在 <p> 内来实现。标记(因为您的标记中目前没有):

$('select[name="dd_1"]').change(function(e) { ... });

此外，您应该能够通过使用 toggle() 显着简化现有代码。功能:

$(function() {
  $('select[name="dd_1"]').change(function(e) {
    $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == '2');
  });
});

示例

$(function() {
  $('select[name="dd_1"]').change(function(e) {
    $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == '2');
  });
});

p {
  margin: 0;
}
textarea {
  overflow: hidden;
  resize: none;
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  height: 40px;
  width: 98%;
  margin: 0;
  background: #fff;
}
.dropDown {
  width: 99.5%;
  height: 46px;
  margin: 0;
  border: none;
  background: none;
}
#irMain {
  background-color: #ddebf7;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 30px;
}
#irQMain {
  background-color: #FFF;
  border: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 50px;
}
#irMainWitness {
  background-color: #ddebf7;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 30px;
  display: none;
}
#irQMainWitness {
  background-color: #FFF;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  text-align: center;
  font-weight: bold;
  margin: 0;
  height: 50px;
  display: none;
}
#irBottomWitness {
  background-color: #FFF;
  border: 2px solid #000;
  height: 50px;
  margin: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="irMain">
  <p>Was there a Witness to the Incident?:</p>
</div>
<div id="irQMain">
  <select name="dd_1" class="dropDown">
    <option value="1">No</option>
    <option value="2">Yes</option>
  </select>
</div>

<div id="irMainWitness">
  <p>Name of Witness:</p>
</div>

<div id="irQMainWitness">
  <textarea name="tb_16" cols="1" rows="2"></textarea>
</div>

<div id="irMainWitness">
  <p>Contact Number of Witness:</p>
</div>

<div id="irBottomWitness">
  <textarea name="tb_17" cols="1" rows="2"></textarea>
</div>