Senin, 04 Juli 2011

fixing option tag display none bug in webkit

The Problem

option tag using style display:none isn't hidden in browser using webkit engine (chrome, safari)

The workaround

using jQuery js framework with one simple function taken from jquery.extended_helper_2.6:
(function($) {
    /* 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 = {};
        var $this = $(this);
        // restore previously hidden options and remove any placeholder option

        // return if no selector specified
        if(!selector) return;
        // find, detach and store specified hidden options
        var hidden_options = $this.find('option');
          hidden_options = hidden_options.deleteIf(function(){return !selector.call(this);});
          hidden_options = hidden_options.filter(selector);

        // find visible options
        var visible_options = $this.find('option');

        // toggle hide/show select depend on visible option found
        if(options.placeholder && !visible_options.length)

        // select first option if no other visible option selected and trigger select change
          visible_options.filter(':first').attr('selected', 'selected');
      return this;

The Demonstration