Thursday, March 10, 2011

Custom Dropdown with jQuery

Hi,

If you want to customize the conventional dropdown box in HTML, then here is what you need. In this you can put images, hyperlinks anything as the dropdown options. Here is how it looks like:

and the options as:


and finally after selecting:


So here is the code. Click here to download.

Hope this helps!

7 comments:

  1. Thank you for this very useful contribution.
    I'm a jquery newbie but I need to use this DD in my PHP project. My question is what is the value to submit within the form post when I select a country. Is that the value of the hidden field?

    ReplyDelete
  2. Thanks. Yes, there are two hiddent text fields for two dropdowns with names:

    name="text_value_1"
    name="text_value_2"

    Put the entire thing inside form tag and change the name of the textfields according to your need.

    I have made few changes, please download the latest version from

    http://php-drops.googlecode.com/files/custom_dropdown_jquery.rar

    Hope I answered your query :)

    ReplyDelete
  3. Well done! Now in my form I have to submit 2 vars $name and $value. When I'm loading the form DB I need that the DD point to the db loaded item. for exemple if the stored value is "canada", I need that the user see "canada" selected when he goes check his profile. How to do that?.
    Many thanks!

    ReplyDelete
  4. Yes, I think I know what you mean. Its my bad. I should have included this in my previous revision. Please download the latest version:

    http://php-drops.googlecode.com/files/custom_dropdown_jquery.rar

    What I have done is, added an attribute "value" against each option, just like conventional DD. This can hold the field ID/country abbreviation.

    On selecting if the value attribute exist the hidden field will have that else it will return the value that is being displayed.

    In first DD US and UK doesn't have the value attribute and in second they do. Hope this answers your request :)

    ReplyDelete
  5. Thank you, but I didn't see any value attribute. Are you sure about your version?

    ReplyDelete
  6. Yes, I a certain about that. Please search the example.html for 'class="custom_dropdown_option" value="AUS"'. Else give me your email address, I'll mail you the final version from my computer itself.

    ReplyDelete