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