函数不会在 IE7 中生成选择选项答案

【问题标题】：Function doesn't generate options for select in IE7函数不会在 IE7 中生成选择选项
【发布时间】：2012-03-06 09:18:59
【问题描述】：

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

   <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/

谢谢

【问题讨论】：

帮助您将 fiddle 改为 head 而不是 onload

标签： javascript jquery internet-explorer-7

【解决方案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);
});

【讨论】：

是的 - updated the fiddle 所以 OP 也可以现场处理它。
大家好主意，谢谢大家 :-) 网络只是我的爱好，所以我知道的不多，搞砸了
嗯，这只是 3 期中的 1 期

【解决方案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');  
    }              
  });
});

【讨论】：

【解决方案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));
    }
});

【讨论】：

【解决方案4】：

是myselect.add()中的第二个参数，虽然是null，IE7还是不喜欢。

看到这个post：

【讨论】：

【解决方案5】：

我没有IE，但我是这样使用即时函数的：

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

这可能是问题所在？

【讨论】：

【解决方案6】：

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

【讨论】：