顯示基於選擇選項值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) {並且它應該起作用。

希望能幫助到你！