如何根據枚舉值隱藏和顯示命名的div？

Question

我試圖隱藏和顯示基於從一個枚舉的div。我知道這應該是相當簡單的，但我對我的JavaScript（和jQuery）非常生鏽。

我選擇的形式是：

<div id="recurrency"> 
    <form:select path="recurrency"> 
     <form:option value="-" label="--Please Select"/> 
     <form:options items="${recurrency}"/> 
    </form:select> 
</div> 

在哪裏，我也有一堆聲明的div：

<div id="dayInterval"> 
    // something 
</div> 

同爲weekInterval和monthInterval。

我的JavaScript代碼的段子：

 
$().ready(function() { 
      $('#recurrency').on('change', function() {
 

  alert(recurrency); 

      if (recurrency.value == 'DAILY') { 
       $('weekInterval').hide(); 
       document.getElementById('weekInterval').style.display = 'block'; 
       document.getElementById('monthInterval').style.display = 'block'; 
      } 
      if (recurrency.value == 'WEEKLY') { 
       document.getElementById('dayInterval').style.display = 'block'; 
       document.getElementById('monthInterval').style.display = 'block'; 
      } 
      if (recurrency.value == 'MONTHLY') { 
       document.getElementById('dayInterval').style.display = 'block'; 
       document.getElementById('weekInterval').style.display = 'block'; 
      } 
     }); 
    }); 

上的JavaScript代碼警報部分總是返回Object HTMLCollection。我相信這很簡單，但我不能在這裏看到出路。

有人可以扔我一隻手嗎？提前致謝！

Answer 1

您需要爲select元素設置更改事件處理程序。然後更改事件處理程序中，你可以選擇的值，然後通過使用.toggle()

在你的情況recurrency設定的目標元素的顯示是指div元素（因爲這是div的ID）這就是爲什麼你會得到那樣的警報信息。

$(function() { 
 
    $('#recurrency select').on('change', function() { 
 
    var value = this.value; 
 
    $('#dayInterval').toggle(value == 'DAILY'); 
 
    $('#weekInterval').toggle(value == 'WEEKLY'); 
 
    $('#monthInterval').toggle(value == 'MONTHLY'); 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="recurrency"> 
 
    <select path="recurrency"> 
 
    <option value="-" label="--Please Select" /> 
 
    <option value="DAILY">DAILY</option> 
 
    <option value="WEEKLY">WEEKLY</option> 
 
    <option value="MONTHLY">MONTHLY</option> 
 
    </select> 
 
</div> 
 

 
<div id="dayInterval">DAILY</div> 
 
<div id="weekInterval">WEEKLY</div> 
 
<div id="monthInterval">MONTHLY</div>