innerHTML tag option doesn't work in IE9

Question

My code:

    this.d.innerHTML = "";
    this.d.innerHTML += "<option value='-1'>Selecciona Distrito</option>";
    this.d.innerHTML += "<option value='santiagodesurco'>Santiago de Surco</option>";
    this.d.innerHTML += "<option value='sanborja'>San Borja</option>";
    this.d.innerHTML += "<option value='independecia'>Independencia</option>";
    this.d.innerHTML += "<option value='miraflores'>Miraflores</option>";
    this.d.innerHTML += "<option value='santanita'>Santa Anita</option>";

The problem is that the select tag in IE9 the tag option is ignored check it out:

http://i.stack.imgur.com/IolyV.png

But in Chrome the tag option is displayed:

http://i.stack.imgur.com/sfbDS.png

That's my problem, thanks in advance.

Answer 1

I solved my problem for each tag option i do:

        var opt = document.createElement('option');
        opt.text = 'Santiago de Surco';
        opt.value = 'santiagodesurco';
        document.getElementById('dropdown3').options.add(opt);

That way I fix the problem, so the code works in IE9.