How to get a dropdown working as DataTable column header?

[JS]

Where is an example of using a SELECT control as the header of a DataTable column?

I'm working to modify someone else's work, so my initial approach was to define the HTML in the column definitions as the content of the label.  Ugly - any better way?

When I do that, the dropdown appears, but there are a few problems:

1. CRITICAL: the label of the control never changes!  A side effect is that you can never select the first item again after changing values!

2. it doesn't behave like any other select controls: you need to hold down the mouse button for a second - or mouse onto the popup list for the popup list to stay open for more than a millisecond.

3. it still sorts the table on mouseup when changing the select's value (the value change registers and fires, it just never updates the label) - regardless of what I set the column's sorting preferences.  the table only defines the first column (not the one I'm interested in) as sortable.

It appears no one else has had luck with this - Google itself has no related results for what I've tried, and the autocomplete for this group included a 'works' version of querying this - with zero results.

So what kind of event wrangling is required to get this to work so the SELECT can behave like any other on the page?

Thanks!!!

[JS]

Bueller?