Question

我在IE7中遇到问题。 gen函数不会为select生成任何选项。这是选择

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

我用这种方式产生了多年（从1942年到1994年）：

    $(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');  
            }              
        }

当我点击选择时，应该更改类别。（还必须检查'性别'电台）。我正在使用jQuery 1.5.1分钟。它适用于chrome，firefox和opera。这是代码（它实际上在jsfiddle中不起作用）http://jsfiddle.net/5DvHj/2/

谢谢

Answer 1

为什么使用内联函数？你应该使用jquery来添加选项：

$(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

上的类型不匹配

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

这很有效。我也修复了点击（删除了内联onclick事件

这是代码中代码尽可能少的代码。另一篇文章缓存了一些jQuery对象。这根本不是一个坏主意......

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

为了获得良好的跨浏览器可靠性，请尝试在jQuery中执行所有操作。

点此：

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

它是myselect.add()中的第二个参数，即使它是null，IE7仍然不喜欢它。

请参阅此post：

Answer 5

我没有IE，但我以这种方式使用即时功能：

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

可能这就是问题吗？

Answer 6

您的内联onclick属性是问题所在。将其替换为jQuery，例如$('span.gender, #year_individ').click(showCategory);

函数不会为IE7中的select生成选项

6 个答案: