HTML Select shortcut key override

Question

I have dropdown list (HTML select element) which simply contains a heap of dollar amounts. E.g.

$50,000

$100,000

$150,000

$200,000

and so on..

An example of one of the option elements inside it would be:

<option value="150000">$150,000</option>

I want the user to be able to start typing in 1..5..0.. and get it to auto-jump down to the $150,000 item - this works fine natively in most browsers if I didn't have any $ symbol in my innerhtml. But because all of my innerhtml descriptions are prefixed with a $ sign, the keyboard shortcuts are all identical, so effectively useless.

I'm assuming there is no simple way in raw HTML to specify that the keyboard shortcuts should be obtained from the corresponding value attribute, rather than the innerhtml text?

So what would be the cleanest jquery snippet to achieve this?

Answer 1

If at all possible, I would simply put the $ in front of the drop down menu. That would be the least painful way.

If that is not an option, you could consider using a background-image containing a $ sign for each option:

select.dollar option { background-image: url(...); 
                       background-position: left center; 
                       background-repeat: no-repeat;
                       padding-left: 20px;
                      }

browser support for that is very, very flaky, though - it would work probably only in the very newest version of each family. It may not work in IE at all, I don't have an overview handy. Also, this way is not good for future internationalization.

Other than that, I think you would have to resort to a JavaScript based custom drop-down.