Question

我试图在值2时显示我的其他div的下拉列表。现在我的下拉列表是“是否见证了事件？”然后有两个选项“否”为值1，“是”为值2.因此，如果选择值2“是”，则另外两个问题显示为“证人姓名”和“联系见证人数”。但我似乎无法弄清楚为什么它不起作用，有人能解决这个问题吗？

再次感谢，

太

$(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');
  });
});

示例

＆＃13;
＆＃13;
$(function() { $('select[name="dd_1"]').change(function(e) { $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == '2'); }); });
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

select元素的选择器是错误的。它应该是

 $('#irQMain select[name=dd_1]')

因为你的select元素位于id为irQMain

的div元素中

$(window).on("load", function() {
  $('#irQMain select[name=dd_1]').change(function(e) {

    if ($('#irQMain 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>

在某些值上下拉不显示内容

2 个答案: