显示基于选择选项值jQuery的隐藏div

Question

我有一个值为0、1、2、3、4、5、6、7的选择列表。选择值为0和1时，我想显示一个div，但是选择值为2、3、4、5时， 6,7我想隐藏该div。我现在的代码如下

HTML

<select class="rel_status">
  <option value="0">---</option>
  <option value="1">Single</option>
  <option value="2">In a relationship</option>
  <option value="3">Engaged</option>
  <option value="4">Married</option>
  <option value="5">Separated</option>
  <option value="6">Divorced</option>
  <option value="7">Widowed</option>
</select>

<div class="rel_part">                   
  <input type="text" name="part_name" placeholder="Search">
</div>

jQuery的

//hide partner search form
$('.rel_part').hide(); 

//Search Relationship partner
$(document).ready(function(){
  $('.rel_status').change(function(){
    if($('.rel_status').val() == '2','3','4','5','6','7') {
        $('.rel_part').show(); 
    } else {
        $('.rel_part').hide(); 
    } 
  });
});

当我把代码实际工作

.val() == '2')

代替

.val() == '2','3','4','5','6','7')

但是我不能显示其他值的div

Answer 1

if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {

演示

 //hide partner search form $('.rel_part').hide(); //Search Relationship partner $(document).ready(function() { $('.rel_status').change(function() { if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) { $('.rel_part').show(); } else { $('.rel_part').hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="rel_status"> <option value="0">---</option> <option value="1">Single</option> <option value="2">In a relationship</option> <option value="3">Engaged</option> <option value="4">Married</option> <option value="5">Separated</option> <option value="6">Divorced</option> <option value="7">Widowed</option> </select> <div class="rel_part"> <input type="text" name="part_name" placeholder="Search"> </div> 

Answer 2

使用它会起作用

$('.rel_status').change(function(){
  if($('.rel_status').val() < 2) {
    $('.rel_part').show(); 
  } else {
    $('.rel_part').hide(); 
  } 
});

 //hide partner search form $('.rel_part').hide(); //Search Relationship partner $(document).ready(function(){ $('.rel_status').change(function(){ if($('.rel_status').val() < 2) { $('.rel_part').show(); } else { $('.rel_part').hide(); } }); }); 

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <select class="rel_status"> <option value="0">---</option> <option value="1">Single</option> <option value="2">In a relationship</option> <option value="3">Engaged</option> <option value="4">Married</option> <option value="5">Separated</option> <option value="6">Divorced</option> <option value="7">Widowed</option> </select> <div class="rel_part"> <input type="text" name="part_name" placeholder="Search"> </div> 

Answer 3

这不是将一个值与许多其他值进行比较的有效方法。

if($('.rel_status').val() == '2','3','4','5','6','7')

改用逻辑OR运算符：

if($('.rel_status').val() == '0' || $('.rel_status').val() = '1') {
    $('.rel_part').hide(); 
} else {
    $('.rel_part').show(); 
}

注意，我在if子句中切换了大小写，因此编写代码更少。

Answer 4

问题是，这是不使用的一种有效方式,在Javascript，因为你将最终验证if($('.rel_status').val() == '7') {代替。

您可以将代码更改为if($.inArray($('.rel_status').val(), ['2','3','4','5','6','7']) != -1) {并且它应该起作用。

希望能帮助到你！