How can I hide unselected (web part connection) list items?

Team,

Scenario:

I have two web parts that are connected with a connection filter. When I select an item in list A, related items in list B are filtered. Hooray!

But list A is really long, so when an item is selected in list A, I would like to hide all the unselected list A items.

I currently have a HTML Form Web Part which I use to filter out different types of list A items. Which allows me to select from a drop down list, apply a filter, and a button to clear the filter (reload the window).

<div class="column_left" style="align:center">
 <div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
    <select name="Team">
        <option value=""> Select Team </option>
        <option value="Change Management"> Change Management </option>
        <option value="Client Delivery"> Client Delivery </option>
        <option value="Incident Management"> Incident Management </option>
        <option value="Network Management Center"> Network Management Center </option>
        <option value="OBTAC Cloud&DC"> OBTAC Cloud&DC </option>
        <option value="OBTAC UC&CC"> OBTAC UC&CC </option>
        <option value="OBTAC Network&Security"> OBTAC Network&Security </option>
        <option value="Problem Management"> Problem Management </option>
        <option value="Professional Services"> Professional Services </option>
        <option value="Service Desk"> Service Desk </option>
        <option value="Singtel/NCS"> Singtel/NCS </option>
    </select>
    </br>
    <input type="button" value="Apply Filter" onclick="javascript:_SFSUBMIT_"/>
 <input onclick="window.location.href=window.location.href" type="button" value="Clear Filter"/>  
 </div> 
</div>

I understand that "row.style.display = 'none';" can be used to hide rows. I have a piece of code that loops through a list and checks the date and hides list items that do not match specific date criteria.

I think I could do something similar, but in order for it to work I need to know how I can check which list item has been selected in a web part connection filter. Any idea what to check for?

So what I would do is add another button to my HTML FORM web part called "Filter Unselected". When clicked it would loop through list A list items and hide each row that is not selected. In theory this should leave the one item that was selected using the connection filter action.

UPDATE #1:

This page has code that appeared to help. It detects the right list item ID (elemID), I couldn't get the contents of "selectedImg$" or "linkText" to display (I have poor Javascript skills), but I think I can filter ok with the ID anyway.

<script type="text/javascript">

function ShowSelectedItems() {

var selectedImg$ = $('img[alt^="Selected"]');
var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];
var linkText = selectedImg$.closest('tr').find('div#'+elemID).find('a').text();

alert("selectedimg: " + selectedImg$ +"\nelemID: " + elemID + "\nlinkText: " + linkText );

}
</script>

<input type="button" value="Show Selected Items" name="btnShowSelectedItems" id="btnShowSelectedItems" onclick="ShowSelectedItems();" /> 

UPDATE #2:

As mentioned in the comments below. I think my solution is to use a HTML Form web part that passes the selection ID parameter through a web part connection. Again, not being proficient at JavaScript, I'm unsure how to pass the value without manually inputting it i.e. pass automatically when button is clicked.

This is what I have so far...but its not working.

<script type="text/javascript">

var selectedImg$ = $('img[alt^="Selected"]');
var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];

</script>

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input type="hidden" name="itemSelected" value=elemID/>
<input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

And once I've got the filter working, I want to make the button toggle between filtering and clearing using code found here.

UPDATE #3:

Progress... If I put the following code into a HTML form, and connect "itemSelected" to the ID column in list A, then select item ID #7, then click the "GO" button in the HTML form. List A filters item #7 perfectly.

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
    <input type="hidden" name="itemSelected" value="7"/>
    <input type="button" value="Go" onclick="javascript:_SFSUBMIT_"/>
</div>

The only thing I'm struggling with now is how to pass the value stored in "elemID" below into the value of my HTML Form?

var selectedImg$ = $('img[alt^="Selected"]');
var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];

UPDATE #4:

Success! I discovered how to move the "SFSUBMIT" to the function properly and pass the elemID to the input. Last step is to convert the button into a toggle button so it alternates between being a filter and clearing the filter. I'll be using the code I found here.

<script type="text/javascript">
    function filterSelected() {
        var selectedImg$ = $('img[alt^="Selected"]');
        var elemID = selectedImg$.closest('tr').attr('iid').split(',')[1];
        document.getElementById("filterButton").value = elemID;
    _SFSUBMIT_;
    }
</script>

<input type="hidden" name="itemSelected" value="" id="filterButton"/>
<input type="button" value="Go" onclick="filterSelected();"/>

regards Michael