Jquery/Js - Find columns in Gridview in Repeater - hide them

I am not excatly sure were to start with this so if you need more info please ask.

I have a .aspx page. It has on it a asp:repeater and in that repeater there is a asp:gridview.

Each repeater shows a different product's details. Each gridview in that repeater then has x amount of columns to show name, price, blah blah. The number of columns varies but there are 4 at the start with are always the same.

The name of those 4 columns I have gotten in the code behind and added them to a 'select' (drop down) on the page at the top outside everything.

The idea is that of those 4 columns only 1 is shown at a time, the one selected in the drop down.

Let's assume that my boss is a 'very flexible person' and does not want to change the structure of the page, i.e. repeater and gridview, and wants me to complete this using some js/jquery (client side - i.e. not another call to the db. -- all info sits on page and is shown or hidden on client).

What i have tried....

var singleValues = document.getElementById('<%= deliveryoption.ClientID %>').value;

That gets the value from the drop down -- this part works. Note: will use this value to compare against the column heading (which is in a 'th' tag).

Note: the whole table has a css class of gridDetails and the columns td and the headings is th -- obviously.... :P

Now.... the following seems to work

$('.gridDetails td').click(function () {

var singleValues = document.getElementById('<%= deliveryoption.ClientID %>').value;

var col = $(this).prevAll().length; //$(this).index; // does the same...?

var header = $(this).parents('table').find('th:nth-child(' + (col + 1) + ')');

alert(header.text());  // for testing ....

var rowIndex = col + 1;

if (header.text() == singleValues) {

$('td:nth-child(' + rowIndex + '), th:nth-child(' + rowIndex + ')').hide();

}

the problem is that it is on the event of click for the table.

How can I change this to be on the event of onchange for the drop down. I know 'how' to do that in the code to bind to the drop down lol, what I mean is, the reference to this in the code is then the drop down, which won't find the column etc....

Just to be clear: - there is a runat=server div around the outside - then there is a repeater - then 1 or more gridviews inside the repeater

I have read about the .proxy() in jquery but I don't think this will help in this case...

I think that is it... let me know if I missed anything...

Thanks in advance

Cheers Robin

edit

The page

<div>
<select name="deliveryoption" id="deliveryoption" runat="server" onchange="test()">

</select>
</div>
<div id="outsidediv" runat="server" style="margin: 5px">
<asp:Repeater ID="SizeSelectionRepeater" runat="server" OnItemDataBound="SizeSelectionRepeater_ItemDataBound">
    <ItemTemplate>
        <table cellpadding="3">
            <tr>
                <td>
                    <asp:Label ID="LabelProductCode" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="LabelPackageQuantity" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        <asp:Panel ID="SizeSelectionPanel" runat="server">
        </asp:Panel>
        <asp:GridView ID="SizeSelectionGridView" runat="server" CssClass="gridDetails" OnRowDataBound="SizeSelectionGridView_RowDataBound"
            AutoGenerateColumns="false" Width="100%">
            <Columns>
                <asp:TemplateField HeaderText="Price">
                    <ItemTemplate>
                        <div style="vertical-align: middle;">
                            <asp:Label ID="PriceLabelSpecial" runat="server" Width="30%" Style="display: inline;"></asp:Label>
                            <asp:Label ID="PriceLabel" runat="server"></asp:Label>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Add to Cart">
                    <ItemTemplate>
                        <table width="300px" style="border-style: none;">
                            <tr>
                                <td valign="middle" style="border-style: none;">
                                    <asp:LinkButton ID="ButtonAdd" runat="server" Width="120px" Height="22px" 
                                    CssClass="buynow">Buy now</asp:LinkButton>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <br />
    </ItemTemplate>
</asp:Repeater>
</div>

Solution

As I understand, you can just do something like this:

$('#<%= deliveryoption.ClientID %>').change(function(){
    var singleValues = $(this).val();
    var thOfColumnThatShouldBeHidden = $(".gridDetails th:contains('" + singleValues + "')");
})

Everything else you already have. Now you can find col using thOfColumnThatShouldBeHidden the same way you do it now, but without using $(this) To find required TH I'm using :contains() selector