Why doesn't JQuery change select options in IE?

Question

We're trying to make one drop box change another. We have this code which works fine on Firefox, safari and chrome. But in IE 8+ changing the first dropdown makes no difference to the second. What do we have to change to make it work in IE ? Thanks,

We have this 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();
            });
        });
    });

and this is the 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

The below appears to be working in 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;
            }
            });
        });
    });
​

See here for an example: http://jsfiddle.net/m6A8z/