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