The Problem
option tag using style display:none isn't hidden in browser using webkit engine (chrome, safari)https://bugs.webkit.org/show_bug.cgi?id=8351
The workaround
using jQuery js framework with one simple function taken from jquery.extended_helper_2.6:(function($) { $.fn.extend({ /* hide select's specified option by removing the option and storing it in variable * this function is a workaround to fix webkit bug when hiding select's option: * https://bugs.webkit.org/show_bug.cgi?id=8351 * hideSelectOptions(selector, options) * selector: * - string selector of options to hide * - null or undefined will not hide any options * - empty string will hide all options * - function will be ran for all options, return true to hide the options * options: * - toggleHide: true/false, activate/deactive toggle hide/show select if all options is hidden * - placeholder: string, add placeholder option if all options is hidden * usage: * - $('select.certain_class').hideSelectOptions('.another_class'); // -> show previously hidden options and hide all options with 'another_class' class * - $('select.certain_class').hideSelectOptions(''); // -> hide all options * - $('select.certain_class').hideSelectOptions(); // -> show previously hidden options without hiding any options */ hideSelectOptions: function(selector, options){ if(!options) options = {}; this.filter('select').each(function(){ var $this = $(this); // restore previously hidden options and remove any placeholder option $this.append($this.data('hiddenOptions')).find('.placeholder_option').remove(); // return if no selector specified if(!selector) return; // find, detach and store specified hidden options var hidden_options = $this.find('option'); if($.isFunction(selector)) hidden_options = hidden_options.deleteIf(function(){return !selector.call(this);}); else hidden_options = hidden_options.filter(selector); $this.data('hiddenOptions', hidden_options .removeAttr('selected') .detach()); // find visible options var visible_options = $this.find('option'); // toggle hide/show select depend on visible option found if(options.toggleHide) $this.toggle(visible_options.length); if(options.placeholder && !visible_options.length) $this.append(''); // select first option if no other visible option selected and trigger select change if(!visible_options.filter(':selected').length){ visible_options.filter(':first').attr('selected', 'selected'); $this.trigger('change'); } }); return this; } }); })(jQuery);