Code Snippet

Fix Select Dropdown Cutoff in IE 7

Run (at least the "Usage" part below) after you've loaded jQuery and either at the end of the page or in a DOM ready statement. Note that this fix does create a clone of the select, which will submit itself with the form data, but the name value has been changed to include "-clone" at the end of it, so just be aware of that especially if you are serializing all inputs.

Thanks to Craig Hoover.

// Safely use $
(function($) {

	$.fn._ie_select=function() { 

		return $(this).each(function() { 

			var a = $(this),
			    p = a.parent();

			p.css('position','relative');

			var o = a.position(),
			    h = a.outerHeight(),
			    l = o.left,
			    t = o.top;

			var c = a.clone(true);

			$.data(c,'element',a);

			c.css({
				zIndex   : 100,
				height   : h,
				top      : t,
				left     : l,
				position : 'absolute',
				width    : 'auto',
				opacity  : 0
			}).attr({
				id    : this.id + '-clone',
				name  : this.name + '-clone'
			}).change(function() {
				$.data(c,'element')
					.val($(this).val())
					.trigger('change')
			});

			a.before(c).click(function() {
				c.trigger('click');
			});

		}); // END RETURN

	}; // END PLUGIN

        // Usage
	if ($.browser.msie) {
		$('select')._ie_select();
	}

})(jQuery); // END SAFETY

Reference URL