根据选择选项值jQuery显示隐藏div答案

【问题标题】：show hide div based on select option value jQuery根据选择选项值jQuery显示隐藏div
【发布时间】：2018-04-17 17:24:33
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css user-interface

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 子句中切换了大小写，因此编写的代码更少。

【讨论】：

【解决方案4】：

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

你可以把代码改成这样 if($.inArray($('.rel_status').val(), ['2','3','4','5','6','7']) != -1) { 它应该可以工作。

希望对你有帮助！

【讨论】：