[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 only
shows first select options and
doesn't list the rest two select options, and doesn't react on click
event.

In Chrome 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();});
}