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

我有一个值为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

最佳答案

您可以这样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>

关于javascript - 显示基于选择选项值jQuery的隐藏div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47121856/