如何根据枚举值隐藏和显示命名的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>