code run in FF but not IE

code run in FF but not IE

Hi guys,

I've written this snippet about 8 months ago, since then I hardly touch jquery.

The time I wrote it, it worked in both browsers but today I open it, dont know how come it doesn't work in IE anymore.

Can you help me spot the problem please..

Opps for forgot to attach the code

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    .cat2, .cat1, .cat3 {
        width:200px;   
    }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var cat2object = {};
        $(".cat2 option").each(function(){
            cat2object[this.value]=$(this).text();
        });
        var cat3object = {};
        $(".cat3 option").each(function(){
            cat3object[this.value]=$(this).text();
        });
       
        $('.cat2 option, .cat3 option').remove();
       
        $('.cat1 option').live('click', function(){
            var cat1 = this.value;
            $('.cat2 option, .cat3 option').remove();
            $.each(cat2object, function(key, val) {
                if(key.substring(0,3) == cat1){
                    $('.cat2').append(' <option value="'+ key +'">'+ val +'</option>');
                }       
            });
        });
       
        $('.cat2 option').live('click', function(){
            var cat2 = this.value;
            $('.cat3 option').remove();
            $.each(cat3object, function(key, val) {
                if(key.substring(0,4) == cat2){
                    $('.cat3').append(' <option value="'+ key +'">'+ val +'</option>');
                }       
            });
        });

    });
    </script>
    </head>

    <body>
        <select size="8" class="cat1">
            <option value="com">computer</option>
            <option value="mob">phone</option>
        </select>
        <select size="8" class="cat2">
            <option value="com1">vaio</option>
            <option value="com2">thinkpad</option>
            <option value="mob1">nokia</option>
            <option value="mob2">samsung</option>
        </select>
        <select size="8" class="cat3">
            <option value="com1.1">vaio sz800</option>
            <option value="com1.2">vaio CS</option>
            <option value="com2.1">thinkpad t61</option>
            <option value="com2.2">thinkpad t400</option>
            <option value="mob1.1">Nokia N97</option>
            <option value="mob1.2">Nokia N9000</option>
            <option value="mob2.1">Samsung instinct s30</option>
            <option value="mob2.2">Samsung Alias 2</option>
        </select>
    </body>
    </html>