How to hide/show span based on select object value

I'm trying to hide/show the contents of a span based on the value of a cfselect object (dropdown menu) which is called "Interval".  I'm using ColdFusion and JavaScript.

The objects and spans on the page are dynamically named because the page displays multiple records that can updated all at once.  Each record has its own "Interval" dropdown menu.  I've named these Interval cfselect controls "Interval#ServiceItems.ClientServiceID#.  There are several spans per record, each named "Day#ServiceItems.ClientServiceID#", "Week#ServiceItems.ClientServiceID#", "Month#ServiceItems.ClientServiceID#", etc.  

When a user changes the value of a dropdown named "Interval555" to "Day", I want to display the contents within the Day555 span... some Day-specific text boxes, etc.  When the user selects "Month",... same thing: hide the Day555 span and show the Month555 span.  The same thing for the record right below -- When a user changes the cfselect named Day556 to "Week", show the contents of the span named "Week556" and hide the other -556 spans.

It seems like a simple Java function could account for the Interval chosen (Day, Week, etc) and the current record ID (CSID) and show/hide the related spans accordingly.  

I'm not very experienced with Java, as you can tell.  Any help is hugely appreciated.  Also, I'm not bent on using spans... if you think a <div> is better, that's cool.  

Thanks in advance for any help!

-Bill


<SCRIPT language="JavaScript">
     function ToggleVisible(Interval, CSID)
     {      
       ???
     }
tmangoldcpaAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
James RodgersConnect With a Mentor Web Applications DeveloperCommented:
on the fly, might need to debug
0
 
James RodgersWeb Applications DeveloperCommented:
funtion hideAll(){
 var collectionSpan=document.getElementsByTagName('span')
for (x=0;x<collectionSpan.length;x++){
collectionSpan[x].style.display='none';
}
}

function showSelected(objShow){
hideAll()
document.getElementById(objShow).style.display='block';
}

and in the select

onClick='if(this.selectedIndex){ showSelected(this.options[this.selectedIndex].value)} else{hideAll()};'

where the value of the selection is the name of the span you want to show.

<option value="week555">Week 555</option>
0
 
James RodgersWeb Applications DeveloperCommented:
glad i could help

thanks for the points
0
All Courses

From novice to tech pro — start learning today.