Question

I wrote this in order to fix the problem IE has with select drop down lists being truncated if their options were longer than the default value of the select. Now it works fine but I want to improve the code in order to learn how to write things in a much more useable fashion.

            $(document).ready(function() {
             if ($.browser.msie) {
                $('select').focus(function() { $(this).addClass('expand').removeClass('clicked'); })
                $('select').blur(function() { $(this).removeClass('expand clicked'); })
                $('select').mousedown(function () { $(this).addClass('expand').removeClass('clicked'); } )
                $('select').hover(function () { }, function () {if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); $(this.blur()) }}) 
                $('select').click (function() { $(this).toggleClass('clicked');  })
                $('select').change(function(){ $(this).removeClass('expand clicked'); $('select.widerIE').blur() })
             }
            });

I tried making functions which were called by each event but that seemed to fail eg:

            $('select').click(test (a))
                function test (a) {
                     $(a).addClass('expand').removeClass('clicked') 
                    }

Answer 1

It’s not clear to me what you’re trying to achive. One thing is sure – you can’t define a event handler like that (see note below):

$('select').click(test (a))

Note: Technically, you could define your event handler like in code above. For that to work, function test would have to return a function that would be actual handler for the event.