Resizable select box, size attribute value updated on resize event
I'd like to make a select box that is resizable (using the 'resizable' script) and also modifies the native HTML select's "size" attribute. When a select's size attribute has a value of "1" (or no value at all) it displays a button on the right of the box (the down arrow); clicking that button causes the option list to overlay the page.
If the size attribute have a value of greater than 1, the select does not show the button; instead it behaves as a multi-select box (without allowing multiple selection) and does not overlay the option list.
This latter implementation plays nicely with the 'resizable' script - the single-option implementation does not (it only scales the first option and button).
The value of size attribute would be clamped to a minimum value of "1". As it is being resized vertically, the attribute value would increment/decrement.
I do
not want to use the "multiselect" attribute - this is different, as it allows more than one option to be selected simultaneously, which is often not desirable.
Can someone tell me how to do this?