¿Cómo ocultar y mostrar los divs nombrados según el valor de enumeración?

Estoy tratando de ocultar y mostrar divs basados ​​en una enumeración de a. Sé que esto debería ser bastante simple, pero estoy muy oxidado en mi JavaScript (y jQuery).

Mi formulario de selección es:

Donde Y también tengo un montón de divs declarados como:

 
// something

Lo mismo para weekInterval y monthInterval .

Mi pieza de código JavaScript es:

 $ (). listo (función () {
             $ ('# 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'; } }); });

La parte de alerta en el código JavaScript siempre devuelve Object HTMLCollection . Estoy seguro de que esto es bastante simple, pero no puedo ver el camino aquí.

¿Puede alguien echarme una mano? ¡Gracias por adelantado!

Debe tener el controlador de eventos de cambio para el elemento de select . Luego, dentro del controlador de eventos de cambio, puede obtener el valor de la selección y luego configurar la visualización de los elementos de destino utilizando .toggle ()

En su caso, la recurrency refiere al elemento div (ya que es el ID de la div), por eso está recibiendo ese mensaje de alerta como ese.

 $(function() { $('#recurrency select').on('change', function() { var value = this.value; $('#dayInterval').toggle(value == 'DAILY'); $('#weekInterval').toggle(value == 'WEEKLY'); $('#monthInterval').toggle(value == 'MONTHLY'); }).change(); }); 
  
DAILY
WEEKLY
MONTHLY
Intereting Posts