Jump to content

Alternative for <select> Dropdown List


Recommended Posts

Does anyone have a source or recall how to make an alternate dropdown list that will work within the <form> tag and that it behave as such?


Right now I have a right column that is about 300px wide and the default dropdown list (using <select>) is pushing it out too wide because one of the <option> has a very long value. Of course I can set the <select> to be smaller than the containing right column's width but then it chops off the <option> long value in IE. Naturally, it's fine for Firefox and Chrome.


I have tried a few scripts in which one worked for IE8 but fails miserably in IE7. The script seems to be outdated.


I thought that using a definition list or unordered list would work but I wanted to know if jquery is requiry to make it work with the <form> tag plus the dropdown has to behave just the same visually and passes the values as though it was coded using the <select> and <option> tags. This will be integrated into asp and right now I'm just not ready to rewrite the code unless I can find a solution that will make the major coding changes beneficial.


Seriously, I googled it but maybe I am not using the right term.



Link to comment
Share on other sites

Have you taken a look at this: http://v2.easy-designs.net/articles/replaceSelect/ ? Or check out the code behind http://uniformjs.com/ -- I believe it does a similar thing to replace select boxes.


If I understand things correctly, you still keep the <select>, but it's hidden from the user. Instead, you use some sort of CSS/Javascript based replacement, and javascript is used to update the real, hidden <select> based on whatever the user chooses.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...