Can I proxy a select field with HTML and javascript?

Question

Since <select> elements don't style in a predictable way, I was thinking about setting up a javascript/html proxy element to manipulate a hidden <asp:dropdownlist> field. The code that populates the select is beyond my control, but I don't want to render the actual field.

Does anyone have any experience or pointers with something like this?

Answer 1

This is a job for jQuery. What you want to do is roughly the following:

1. Use css to hide the select dropdown
2. Read out the options/values of the select element into a javascript array. jQuery is good at this.
3. Use jQuery to generate a ul element with an li element for each of the options
4. Use the many methods that are around for styling the ul element into a dropdown

Here is an example of someone who has done this: http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/ . You can probably use his code almost as is. The example is a bit confusing because he styles the dropdown to look exactly like a select element. But if you start editing the css you can get it to look any way you want.