Custom Select Menu, jQuery Not Working

Question

I am trying to replicate the functionality of a standard select menu by making a custom one.

The problem is that I can't get it to behave like a select menu. My goal is to be able to replace the "selected" text whenever a list item is clicked. I'm also trying to get the menu to close whenever a user clicks outside of the menu.

Here is a link to my JS Fiddle:

http://jsfiddle.net/dg7Lc/9/

I appreciate any insight!! Thanks!

-D

Answer 1

As far as fixing your code, you need to change $('.selected').appendTo('.custom-select span'); to $('.custom-select span').html($('.custom-select ul li.selected').html());

http://jsfiddle.net/dg7Lc/13/

The thing about select lists is that they are styled by the browser/OS and have several onclick/onblur actions and complicated actions when tabbing to and pressing other keys.

With that being said, you might want to look into a jquery selectbox plugin. I would highly recommend https://github.com/fnagel/jquery-ui as I have found it to be the most consistent across browsers while still acting exactly like a selectbox.

Their code is complicated (like having a hidden selectbox behind the one being displayed) but it is all necessary. From my personal experiences, this plugin is very easily styled and customized.