[jQuery] Cross-browser problem

[Denis Abramov]

Hello everyone! I wrote this script and it doesn't work in IE6 & IE7
and Chrome, but works in last Firefox and last Opera. In IE it simply
doesn't list <option></option> at all and doesn't react on current_cat
variables at all.

If i set all "current" variables to 0 it shows all data, but doesn't
react on <option> click event.

Firebug doesn't show any problems, tried to check all values with -
console.log(); and they all contain proper values as it seems.

Please help me to find a problem.

console.log(current_cat1,current_cat2,current_cat3);

null1 null2 null3
0 null2 null3
0 0 null3
0 0 0



var current_cat1 = 'null1';
var current_cat2 = 'null2';
var current_cat3 = 'null3';


function call_cats() {

        fill_cat1();
        fill_cat2();
        fill_cat3();

}











function fill_cat1() {

        $('#cat1').html('');
        var selected = '';

        var cat1 = $('#cat1');

        cat1.prepend('<option id="null1" value="null1"></option>');

                var i = 0;

                while(i <= main_cats['main_cat_rows'] - 1) {
                        if(current_cat1 == 'null1') {
                        $('#null1', cat1).remove();
                        cat1.prepend('<option id="null1" value="null1" 
selected></
option>');
                        current_cat2 = 'null2';current_cat3 = 'null3';
                        }
                        if(current_cat1 == i){var selected = 'selected';
                        cat1.append('<option ' + selected + ' value="' + i + 
'">' +
main_cats['main_cat'][i] + '</option>');
                        i++;
                        }

                        cat1.append('<option value="' + i + '">' + 
main_cats['main_cat'][i]
+ '</option>');
                        i++;
                }
        $('#cat1 option').bind("click", function(){current_cat1 = $(this).attr
('value'); call_cats();});
}










function fill_cat2() {

        $('#cat2').html('');
        var selected = '';

        var cat2 = $('#cat2');

        cat2.prepend('<option id="null2" value="null2"></option>');

                var i = 0;

                while(i <= sub_cats['list_rows'][current_cat1] - 1) {
                        if(current_cat2 == 'null2') {
                        $('#null2', cat2).remove();
                        cat2.prepend('<option id="null2" value="null2" 
selected></
option>');
                        current_cat3 = 'null3';
                        }
                        if(current_cat2 == i){var selected = 'selected';
                        cat2.append('<option ' + selected + ' value="' + i + 
'">' + sub_cats
['list_all'][current_cat1][i] + '</option>');
                        i++;
                        }
                        cat2.append('<option value="' + i + '">' + 
sub_cats['list_all']
[current_cat1][i] + '</option>');
                i++;
                }
        $('#cat2 option').bind("click", function(){current_cat2 = $(this).attr
('value'); call_cats();});
}











function fill_cat3() {

        $('#cat3').html('');
        var selected = '';

        var cat3 = $('#cat3');

        cat3.prepend('<option id="null3" value="null3"></option>');

                var i = 0;
                while(i <= sub_cats['list_sub_rows'][current_cat2] - 1) {
                        if(current_cat3 == 'null3') {$('#null3', 
cat3).remove();cat3.prepend
('<option id="null3" value="null3" selected></option>');}
                        if(current_cat3 == i){var selected = 'selected';
                        cat3.append('<option ' + selected + ' value="' + i + 
'">' + sub_cats
['sub_list'][current_cat1][current_cat2][i] + '</option>');
                        i++;
                        }
                        cat3.append('<option value="' + i + '">' + 
sub_cats['sub_list']
[current_cat1][current_cat2][i] + '</option>');
                i++;
                }
        $('#cat3 option').bind("click", function(){current_cat3 = $(this).attr
('value'); call_cats();});
}