Why jQuery hide()/show() ruin HTML select in Chrome?

Question

I am writing jira-plugin and I need to edit customfield on create issue screen. I use jQuery to do this. I have a problem with jQuery hide / show methods used on html select in Chrome (under Firefox works well). The problem is I have 3 different select-boxes which options depends on the option selected in the previous one. I have a function to prepare the next select list when the previous one changed.

function prepareList(code, list) {
    list.children('option').each(function() {
        if(jQuery(this).text() == code || jQuery(this).text() == 'None') {
            jQuery(this).show();
        }
        else {
            jQuery(this).hide();
        }
    });
}

code is a string which is jQuery('#previous_select option:selected').text() It works fine in many cases but sometimes it resizes the option list. Worse thing is that when the next list has only one option it is not displayed. I can see it has display: inline in html code but after I click on select triangle the dropdown list has like 2 px.

Funny fact is that it works perfectly in Firefox.
IE 8 is not even hiding/showing but it is just IE so I can understand this.
Opera 12.16 is not hiding / showing also.
Safari 5.1.7 for Windows is not hiding / showing too.

The question is which methods should I use to achieve my goal? I tried jQuery(this).css('display', 'none/inline') too and its not working also.

EDIT: JSFiddle: jsfiddle.net/7KRLE/

Sure, it took me a while to prepare it. Here it is http://jsfiddle.net/CDqNb/ — patrykf, Dec 12 '13 at 11:45
I'm unable to replicate your issue on your jsfiddle using chrome v31 — A. Wolff, Dec 12 '13 at 11:50
I just tried the code on jsfiddle on every browser now and its the same. firefox is fine and the rest is just not working. You can see the Chrome problem in 4th option of the first list. Even in 3rd option the dropdown list from second select is getting smaller and You need to scroll which is stupid to me cause when we chose first second option from the first select the second select dropdown list is bigger and You don't have to scroll.
**EDIT**. Reload the fiddle and try it on the 4th option from first menu. — patrykf, Dec 12 '13 at 11:53
ya, i see now what you are talking about. I don't know what cause this strange behaviour. — A. Wolff, Dec 12 '13 at 12:00

score 2 · Answer 1 · answered Dec 12 '13 at 13:08

2

$('#tier3').attr('disabled', true);

In order to disable an option element, you must set its disabled attribute to string 'disabled', not the boolean true.

which gives you:

$('#tier3').attr('disabled', 'disabled');

To enable it:

$('#tier3').attr('disabled', '');

or

$('#tier3').removeAttr('disabled');

IE and many other other browsers behave safely and do not allow hiding of options from the user.
About other special treatments for IE, read this article.

answered Dec 12 '13 at 13:08

Bora

283
7
21

Thanks for your answer @Bora. Your article will help me with Opera/IE, but still I need this working on every borwser and the disabled difference is not making a change. – patrykf Dec 12 '13 at 15:17

score 2 · Accepted Answer · answered Dec 13 '13 at 08:33

I found the solution. It looks like jQuery hide / show is confusing Chrome and other browsers (part of them don't allow hide / show). The answer is to use jQuery.detach() and store the list in the array. If You want the whole list You just need to rebuild it from your array using jQuery.append() on your HTML select. This works well on Chrome, Opera, Safari and Firefox. IE is still a problem.

function prepareList(code, list, level) {
    if (level == 1) {
        list.children('option').each(function () {
            if ($(this).text().substring(1, 4) != code && $(this).text() != 'None') {
                $(this).detach();
            }
        });
    } else if (level == 2) {
        list.children('option').each(function () {
            if ($(this).text().substring(1, 5) != code && $(this).text() != 'None') {
                $(this).detach();
            }
        });
    } 
}

function rebuildList(list, a) {
    if(a == 2) {
        for(var i = 0; i < tempt2.length; i++) {
            $(list).append(tempt2[i]);
        }
    }
    else if(a == 3) {
        for(var i = 0; i < tempt3.length; i++) {
            $(list).append(tempt3[i]);
        }
    }
    else {
        rebuildList($('#tier2'), 2);
        rebuildList($('#tier3'), 3);
        $("#tier2").val('none');
        $("#tier3").val('none');
    }
}  

function saveList(list, a) {
    if(a == 2) {
        $(list).children('option').each(function() {
            tempt2.push($(this).detach());
        });
        rebuildList($('#tier2'), 2);
    }
    else if(a == 3) {
        $(list).children('option').each(function() {
            tempt3.push($(this).detach());
        });
        rebuildList($('#tier3'), 3);
    }
}

New JSFiddle: jsFiddle

Also its solution to just save the inner html of select menu in variable and before hiding - place the html in select tag. So each time when you place html - it works like 'unhide' and detach() make it hide some items. — Dariux, Jan 30 '14 at 14:57
But its weird that I have made this like year ago and it worked, and one day I noticed it does not work anymore. I think it has something to do with chrome update, which introduces lot of various bugs often past few months. — Dariux, Jan 30 '14 at 14:58

Why jQuery hide()/show() ruin HTML select in Chrome?

2 Answers2