mootools 1.11 .setHTML not working in IE

Question

Hello,

I am trying to make a form dynamic using mootools 1.11, for specific reasons I cannot upgrade atm.

I'm trying to manipulate a select field to have dynamic options. This works in Firefox & Chrome but not IE8. Hope there's a fix for this.

bits of the code:

myOptions(hrs+1, 23, 'uur');
$('vertrektijd_uur').setHTML('<option value="">Kies uur</option>'+options_uur);

$('vertrektijd_uur').addEvent('change', function() {
            hrsChanged = $('vertrektijd_uur').getValue();
            hrsChanged = parseInt(hrsChanged);
            if(hrs+1 == hrsChanged)
            {
                myMinutes(parseInt(min));
                myOptions(minChanged, 55, 'min');
                $('vertrektijd_min').setHTML('<option value="">Kies minuten</option>'+options_min);
            }
            else
            {
                myOptions(0, 55, 'min');
                $('vertrektijd_min').setHTML('<option value="">Kies minuten</option>'+options_min);
            }
        });

Answer 1

I have found a workaround for the IE problem. But now I have another problem. With this new method the new options are added (injected) instead of replacing the old options. It seems I need a way to remove the options prior to injecting. But don't know how I would go about doing this.

code:

var myOptions = function(start, end, field){

    // Remove options from select field here then do inject below ??

    for (var n = start; n <= end; n++){
        if(n < 10){
            new Element('option',{'value':'0'+n}).inject(field).setText('0'+n);
        } else {
            new Element('option',{'value':n}).inject(field).setText(n);
        }
    }
}

EDIT: I was able to solve it by doing a loop through each option and removing them.

var children = field.getChildren();
    children.each(function(option){
        option.remove();
    });