如何根据枚举值隐藏和显示命名div？ [英] how to hide and show named divs according to enum value?

问题描述

我试图隐藏和显示基于一个枚举的div。我知道这应该很简单，但是我的JavaScript（和jQuery）非常生锈。

我的选择形式是：

 < div id =recurrency> 
< form：select path =recurrency> 
< form：option value = - label = - 请选择/> 
< form：options items =$ {recurrency}/> 
< / form：select> 
< / div> 
  

我还有一堆宣称为：

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

weekInterval 和 monthInterval 。

我的JavaScript代码是：

 
 $（） 。（$（$（$）$ ）; 
 
 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 。我相信这很简单，但我看不出这里的出路。

有人可以扔我一只手吗？感谢提前！

解决方案

您需要为选择元素。然后在更改事件处理程序中，您可以获取选择的值，然后使用设置目标元素的显示.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\"&g t;< / script>< div id =recurrency> < select path =recurrency> < option value = - label = - 请选择/> < 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>  

I'm trying to hide and show divs based on a enum from a . I know this should be rather simple, but I'm very rusty on my JavaScript (and jQuery).

My select form is:

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

Where And I also have a bunch of divs declared as:

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

Same for weekInterval and monthInterval.

My piece of JavaScript code is:

$().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';
            }
        });
    });

The alert part on the JavaScript code always returns Object HTMLCollection. I'm sure this is quite simple, but I can't see the way out here.

Can someone throw me a hand? Thanks in advance!

解决方案

You need to have the change event handler for the select element. Then inside the change event handler, you can get the value of the select and then set the display of the target elements by using .toggle()

In your case recurrency refers to the div element(since that is the ID of the div) that is why you are getting that alert message like that.

$(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>

这篇关于如何根据枚举值隐藏和显示命名div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！