trigger click event on select

trigger click event on select

Hi everyone.

I have been trying to develop a simple method of styling the button on select dropdowns.  Basically just positioning a span of the button on a select box that is styled as required.

That is trivial...

What I have so far failed to achieve is to get the select box to show its options when clicking this span - just want to have the select box drop down the options as it normally would.

tried .trigger('click') and .trigger('mousedown') but to no avail...

Here is what I have:

  1. $(document).ready(function(){
  3. $('select').after('<span class="cta arrow-down"></span>');
  4. $('input[type="submit"]').after('<span class="cta arrow-right"></span>');
  6. $('span.cta').each(function(){
  7. var $this = $(this);
  8. var $prev = $this.prev();
  9. var $dim = $prev.position();
  10. $this.css({'top':$dim.top, 'right':0, 'height':$prev.outerHeight(), 'width':$prev.outerHeight()});
  11. $this.click(function(){
  12. $prev.trigger('click');
  13. });
  14. });
  15. };
Any input from you guys would be very much appreciated.  I'd very much like to avoid using the dropdownReplacment plugin if possible.

Many thanks.