Passing a selected spry value into a function

Question

Should be relatively simple but i keep banging my head against the wall on this one.
I have a Master Region that when clicked updates the detailregion below. For the 'View All' text below, is there a way to pass the current selected {name} value from the Master Region into a onlick function event for the static text 'view all'?
<div id="current" class="currentcat" spry:detailregion="dsMainDept" spry:selected="{dsMainDept::name}">{name}</div>
<div class="viewall" spry:detailregion="dsMainDept" onclick="FilterByDept('{name}')">view all</div>
In this case, first div output {name} would change to match MasterRegion selected {name}. *The {name} is a selectable filter in the MasterRegion.* The 2nd div function would hold the currently selected {name} and when clicked, run the function that filters content based on that {name}.
Can i target the 1st div id to look for this? or should use a RegionObserver? or change something in the FilterByDept function? I'm a little lost as to what best practice would be. Let me know if more code is needed.
Thanks!

Answer 1

instead of making your spry:select dynamic i suggest you use a static value instead something like
spry:selected="selected";
This will add the selected class to that clicked node. Now that you know what className it has, you can use SpryDOMUtls.js's CSS selector to get the right node from your list.
For example:
alert(Spry.$$('.selected')[0].innerHTML);
hopes this helps