"Show If" region based on dropdown selection

Hey Jason, new day new challenge for you buddy.

I'm trying to use a "Show If" region to hide or display a list based on a selection in another list on the same page.

If the option "Weekly" which has a value of "weeks" is selected in the Repeats column, then the Repeat On list would display, but if any other option is selected it would be hidden.

You can view it live by going to the same url as yesterday and inserting a shift (same as yesterday), but checking the Recurring checkbox.

you cant do that using the show if behaivor, you need to hand code a javascript function to trigger on the onchange event of the list:
set the display for the recuring select list to none and add an id:

<select name="RecurOn" id="RecurOn" multiple style="display:none">

add the on change to the frequency list:

<select name="Frequency" onchange="toggleRecurOn(this.options[this.selectedIndex].value);">

and add the funcitn to the head:

<script type="text/javascript">
function toggleRecurOn(selection) {
	var recurOnList = document.getElementById("RecurOn");
	if(selection == "weeks") {
		recurOnList.style.display = "block";
	} else {
		recurOnList.style.display = "none";
	}
}
</script>

NOTE: this page has duplicate insert behaviors, you do not need the one that is in the body.

I think

add the on change to the [/highlight]frequency list:[/highlight]

<select name="Frequency" onchange="toggleRecurOn(this.options[this.selectedIndex].value);">

was supposed to be

add the on change to the [/highlight]RecurType list:[/highlight]

<select name="RecurType" onchange="toggleRecurOn(this.options[this.selectedIndex].value);">

Right?

I tried it both ways, but neither worked.

Note: The second insert behavior is my next thread question. lol I removed it for now though.

I may have gooten it backwards, but whichever one should be initialy hidden needs to have the ID set, and the display:notn option, the one that should trigger the other toogle gets the onchange event,

in the onchange function, edit this line:
var recurOnList = document.getElementById("RecurOn");

to the id of the list should toggle.

Still not working. Just to be sure I'm understanding you correctly, I'm going to take your code and replace all the list names with either List1 and List2 (The list that would show or hide based on List1 selection).

<select name="List2" id="List2" multiple style="display:none">

add the on change to the List1 list:

<select name="List1" onchange="toggleList2(this.options[this.selectedIndex].value);">

and add the funcitn to the head:
<

script type="text/javascript">
function toggleList2(selection) {
	var List2List = document.getElementById("List2");
	if(selection == "weeks") {
		List2List.style.display = "block";
	} else {
		List2List.style.display = "none";
	}
}
</script>

Does this look right?

it looks correct, but i don't see that code in the page on your live server.

upload it to the server so I can troubleshoot.

Sorry had to grab some food real quick. It's uploaded now.

viewing source of the page on line, it still has the old element names and the old script?

Sorry for the confusion, I didn't change the names in the actually page. I just wanted to verify I was inserting the correct name in the correct place.

List1 = RecurType
List2 = RecurOn

It's working for me, and I Have even tried in windows IE 11 and Firer fox this time. It toggles an empty list, but it toggles.

try clearing your cache.