Function doesn't generate options for select in IE7

Question

I have a problem in IE7. The gen function won't generate any options for the select. There's this select

   <select id="year_individ" name="age" onclick="showCategory();">
    <option></option>
    </select>

that I generate years for (ranging from 1942-1994) this way:

    $(document).ready(function() {
        var myselect=document.getElementById("year_individ"),
                 year = new Date(1995);
        var gen = function(max){
            do { 
                year--;
                myselect.add(new Option(year,max),null);
                max++;          
            } while(max<71);
        }(18);
}); 


      function showCategory() {
            if ($('.gender').is(':checked')) {
                if ($('#year_individ').val() >= 18) { 
                    if ($('#female').is(':checked')) {
                        $('#category').html('Women ');              
                    } else { 
                      $('#category').html('Men ');                                                  
                    }
                    age = parseInt($('#year_individ').val());
                    if (age < 40) $('#category').append('18-39 yrs');
                        else if (age < 50) $('#category').append('40-49 yrs');
                        else $('#category').append('50 and more '); 
                }        
                else
                    $('#category').html('set gender and year');  
            }              
        }

It's supposed to change the category when I click on the select. (also 'gender' radio has to be checked). I'm using jQuery 1.5.1 min. It works in chrome, firefox and opera. here's the code (it actually doesn't work in the jsfiddle) http://jsfiddle.net/5DvHj/2/

Thank you

Answer 1

Why do you use inline function ? And you should use jquery to add option :

$(document).ready(function() {
  var myselect=$('#year_individ'), year = new Date(1995);
  var gen = function(max){
    do { 
      myselect.append($('<option></option>').val(max++).html(--year));         
    } while(max<71);
  }(18);
}); 

Answer 2

Getting a type mismatch on

      myselect.add(new Option(year,max),"");

This works. I fixed the click as well (removed the inline onclick event

This is the code with as little change as possible from your code. Another post cached some of the jQuery objects. That is not a bad idea at all...

DEMO

$(document).ready(function() {
    var myselect=document.getElementById("year_individ"),
    year = new Date(1995);
    var gen = function(max){
      do {
        year--;
        try {
          myselect.add(new Option(year,max),"");
        }
        catch(e) {
          myselect.add(new Option(year,max))
        }
        max++;            
      } while(max<71);
    }(18);


   $('#year_individ, .gender').click(function() {
    var age = $('#year_individ').val();    
    if ($('.gender').is(':checked')) {
      if (age >= 18) {
        if ($('#female').is(':checked')) {
          $('#category').html('Women ');                
        } else {
          $('#category').html('Men ');                                                    
        }
        if (age < 40) $('#category').append('18-39 yrs');
        else if (age < 50) $('#category').append('40-49 yrs');
        else $('#category').append('50 and more    ');    
      }         
      else $('#category').html('set gender and year');  
    }              
  });
});  

Answer 3

For good cross-browser reliability, try doing everything in jQuery.

Conisder this:

HTML:

<select id="year_individ" name="age"></select>

javascript:

$(document).ready(function() {
    var $category = $('#category'), $female = $('#female');//cache jQuery objects to avoid need for rediscovery
    var $year_individ = $("#year_individ").on('change', function(){//onchange event, not onclick
        var $this = $(this);
        if ($("input.gender:checked").val()) {//probably
            var age = parseInt($this.val());
            if (age >= 18) {
                $category.html($female.is(':checked') ? 'Women ' : 'Men ');
                if (age < 40) $category.append('18-39 yrs');
                else if (age < 50) $category.append('40-49 yrs');
                else $category.append('50 yrs and more');
            }
            else {
                    $category.html('set gender and year');
            }
        }
    });
    for(var year=new Date().getYear()-18,age=18; year<=1942; year--,age++ ) {
        $year_individ.append($('<option />').attr('value',age).html(year));
    }
});

Answer 4

It's the second argument in myselect.add() , even though it is null , IE7 still doesn't like it.

See this post :

Answer 5

I don't have an IE, but I use immediate functions in this way:

(function(max){
    // ...
}(18));

Probably that's the problem here?

Answer 6

Your inline onclick attribute is the problem. Replace it with jQuery, like $('span.gender, #year_individ').click(showCategory);