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

小编典典

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

jsp

我正在尝试根据的枚举隐藏和显示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。我敢肯定这很简单，但是我看不到这里的出路。

有人可以帮我吗？提前致谢！

阅读 274

2020-06-10

共1个答案

小编典典

您需要具有该select元素的change事件处理程序。然后在更改事件处理程序内，您可以获取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>

2020-06-10