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

时间：2017-01-17 16:09:43

标签： javascript html css

我试图在值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>

2 个答案:

答案 0 :(得分：2)

您只需要确保您的选择器是正确的，您可以通过在引号中明确地将您的名称值包装在引号中以及不在<p>标记内部进行操作来实现此目的（因为目前没有在你的标记中的一个）：

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

此外，您应该能够使用toggle()函数显着简化现有代码：

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

示例

enter image description here

＆＃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;

答案 1 :(得分：0)

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>

相关问题
最新问题