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. <\/p>\n
Thanks to Craig Hoover.<\/p>\n
\/\/ Safely use $\r\n(function($) {\r\n\r\n\t$.fn._ie_select=function() { \r\n\t\r\n\t\treturn $(this).each(function() { \r\n\t\t\r\n\t\t\tvar a = $(this),\r\n\t\t\t p = a.parent();\r\n\t\t\r\n\t\t\tp.css('position','relative');\r\n\t\t\r\n\t\t\tvar o = a.position(),\r\n\t\t\t h = a.outerHeight(),\r\n\t\t\t l = o.left,\r\n\t\t\t t = o.top;\r\n\t\t\r\n\t\t\tvar c = a.clone(true);\r\n\t\t\r\n\t\t\t$.data(c,'element',a);\r\n\t\t\r\n\t\t\tc.css({\r\n\t\t\t\tzIndex : 100,\r\n\t\t\t\theight : h,\r\n\t\t\t\ttop : t,\r\n\t\t\t\tleft : l,\r\n\t\t\t\tposition : 'absolute',\r\n\t\t\t\twidth : 'auto',\r\n\t\t\t\topacity : 0\r\n\t\t\t}).attr({\r\n\t\t\t\tid : this.id + '-clone',\r\n\t\t\t\tname : this.name + '-clone'\r\n\t\t\t}).change(function() {\r\n\t\t\t\t$.data(c,'element')\r\n\t\t\t\t\t.val($(this).val())\r\n\t\t\t\t\t.trigger('change')\r\n\t\t\t});\r\n\t\t\t\t\r\n\t\t\ta.before(c).click(function() { \r\n\t\t\t\tc.trigger('click');\r\n\t\t\t});\r\n\t\t\r\n\t\t}); \/\/ END RETURN\r\n\t\r\n\t}; \/\/ END PLUGIN\r\n \r\n \/\/ Usage\r\n\tif ($.browser.msie) {\r\n\t\t$('select')._ie_select();\r\n\t}\r\n\r\n})(jQuery); \/\/ END SAFETY<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":6703,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/duplicate-plugin\/","url_meta":{"origin":8258,"position":0},"title":"jQuery Duplicate Plugin","date":"June 28, 2010","format":false,"excerpt":"$.fn.duplicate = function(count, cloneEvents) { var tmp = []; for ( var i = 0; i < count; i++ ) { $.merge( tmp, this.clone( cloneEvents ).get() ); } return this.pushStack( tmp ); }; The .clone() function of jQuery will duplicate a set once, but what if you need multiple copies\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19886,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/clear-a-file-input\/","url_meta":{"origin":8258,"position":1},"title":"Clear a File Input","date":"January 16, 2013","format":false,"excerpt":"You can just clone it and replace it with itself, with all events still attached. var input = $(\"#control\"); function something_happens() { input.replaceWith(input.val('').clone(true)); };","rel":"","context":"With 24 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5257,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/shuffle-dom-elements\/","url_meta":{"origin":8258,"position":2},"title":"Shuffle DOM Elements","date":"January 6, 2010","format":false,"excerpt":"This is from James Padolsey. Check out his article for a pure JavaScript technique as well. Plugin (function($){ $.fn.shuffle = function() { var allElems = this.get(), getRandom = function(max) { return Math.floor(Math.random() * max); }, shuffled = $.map(allElems, function(){ var random = getRandom(allElems.length), randEl = $(allElems[random]).clone(true)[0]; allElems.splice(random, 1); return randEl;\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15342,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/animate-heightwidth-to-auto\/","url_meta":{"origin":8258,"position":3},"title":"Animate Height\/Width to “Auto”","date":"November 30, 2011","format":false,"excerpt":"It's not possible to do thing.animate({ \"height\": \"auto\" });. So this is Darcy Clarke's method to allow that to work. You essentially clone the element, remove the fixed heights currently inflicting the element, and measure\/save the value. Then you animate the real element to that value. jQuery.fn.animateAuto = function(prop, speed,\u2026","rel":"","context":"With 27 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8315,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/javascript-md5\/","url_meta":{"origin":8258,"position":4},"title":"JavaScript MD5","date":"January 15, 2011","format":false,"excerpt":"var MD5 = function (string) { function RotateLeft(lValue, iShiftBits) { return (lValue>(32-iShiftBits)); } function AddUnsigned(lX,lY) { var lX4,lY4,lX8,lY8,lResult; lX8 = (lX & 0x80000000); lY8 = (lY & 0x80000000); lX4 = (lX & 0x40000000); lY4 = (lY & 0x40000000); lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF); if (lX4 & lY4) {\u2026","rel":"","context":"With 22 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4191,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/persistant-headers-on-tables\/","url_meta":{"origin":8258,"position":5},"title":"Persistant Headers on Tables","date":"September 21, 2009","format":false,"excerpt":"When you scroll down a page with a long table on it, typically the header of the table scrolls away and becomes useless. This code clones the table header and applies it at the top of the page once you have scrolled beyond it, and disappears when you have scrolled\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8258"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=8258"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8258\/revisions"}],"predecessor-version":[{"id":8264,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8258\/revisions\/8264"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=8258"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=8258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}