为什么JQuery不改变IE中的选择选项？

Question

我们正试图让一个下拉框变成另一个。我们有这个代码可以在Firefox，safari和chrome上正常工作。但在IE 8+中，第一个下拉菜单对第二个下拉菜单没有影响。我们必须改变以使其在IE中工作？谢谢，

我们有这个jQuery：

//set up the global variable maxChecks which stops donor ticking too many boxes 
    var maxChecks 
    var checkCount=0 
    var boxeschecked = 0 
    //now change the drop down 
    jQuery.noConflict(); 
    jQuery(document).ready(function($) { 
     $(function() {  
      $("#json-one").change(function() { 
       if ($(this).val() >= "1") { 
        $("#hide1").slideDown("fast"); //Slide Down Effect 
       } 
       var $dropdown = $(this); 
       var key = $dropdown.val(); 
       var vals = []; 
       switch(key) { 
      case '1': document.getElementById("t3").innerHTML ="<option value=2>&pound;2.50 per month</option>, <option value=3>&pound;30 per year</option>, <option value=1>A single donation of &pound;30</option>"; maxChecks=1; boxeschecked=0; checkCount=0; document.getElementById("nsdiv").innerHTML =""; for (var i = 0; i < 1 ; i++) {document.getElementById("nsdiv").innerHTML +='<input type="hidden" name="childid[]" value="newchild" checked>';} break; 
      case '2': document.getElementById("t3").innerHTML ="<option value=5>&pound;5 per month</option>, <option value=4>&pound;60 per year</option>, <option value=22>A single donation of &pound;60</option>"; maxChecks=2; boxeschecked=0; checkCount=0; document.getElementById("nsdiv").innerHTML =""; for (var i = 0; i < 2 ; i++) {document.getElementById("nsdiv").innerHTML +='<input type="hidden" name="childid[]" value="newchild" checked>';} break; 

case 'base': vals = ['-']; 
       } 
       $jsontwo.empty(); 
      }); 
     }); 
    }); 

，这是HTML：

<select id="json-one" name="json-one"> 
     <option selected value="base">Please select</option> 
     <option value="1">1 child</option> 
     <option value="2">2 children</option> 
    </select> 
    <!-- this select box will be hidden at first --> 
    <div style="display:none;" id="hide1"> 
     By donating <select id="t3" name="t3"><option>-</option></select> 
    </div> 

Answer 1

下出现在IE浏览器进行工作：

//set up the global variable maxChecks which stops donor ticking too many boxes 
    var maxChecks; 
    var checkCount=0; 
    var boxeschecked = 0; 
    //now change the drop down 
    jQuery.noConflict(); 
    jQuery(document).ready(function($) { 
     $(function() {  
      $("#json-one").change(function() { 
       if ($(this).val() >= "1") { 
        $("#hide1").slideDown("fast"); //Slide Down Effect 
       } 
       var key = $(this).val(); 
       var vals = []; 
      switch(key) { 
       case "1": 
       $("#t3").html('<option value=2>&pound;2.50 per month</option> <option value=3>&pound;30 per year</option> <option value=1>A single donation of &pound;30</option>'); 
       maxChecks=1; 
       boxeschecked=0; 
       checkCount=0; 
       $("#nsdiv").html(''); 
       for (var i = 0; i < 1 ; i++) { 
        $("#nsdiv").append('<input type="hidden" name="childid[]" value="newchild" checked>'); 
       } 
       break; 
       case "2": 
       $("#t3").html('<option value=5>&pound;5 per month</option> <option value=4>&pound;60 per year</option> <option value=22>A single donation of &pound;60</option>'); 
       maxChecks=2; 
       boxeschecked=0; 
       checkCount=0; 
       $("#nsdiv").html(''); 
       for (var i = 0; i < 2 ; i++) { 
        $("#nsdiv").append('<input type="hidden" name="childid[]" value="newchild" checked>'); 
       } 
       break; 

       case 'base': 
       vals = ['-']; 
       break; 
      } 
      }); 
     }); 
    }); 
​ 

在这里看到一个例子：http://jsfiddle.net/m6A8z/