如何根据枚举值隐藏和显示命名的div？答案

【问题标题】：how to hide and show named divs according to enum value?如何根据枚举值隐藏和显示命名的div？
【发布时间】：2016-03-01 03:29:34
【问题描述】：

我正在尝试基于来自 .我知道这应该很简单，但是我对 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(函数 () { $('#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。我敢肯定这很简单，但我看不到这里的出路。

谁能帮我一把？提前致谢！

【问题讨论】：

标签： javascript jquery jsp enums

【解决方案1】：

您需要拥有select 元素的更改事件处理程序。然后在change事件处理函数内部，可以通过.toggle()获取select的值，然后设置目标元素的显示

在您的情况下，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>

【讨论】：

不错！奇迹般有效！谢谢！