Select box java script works in firefox, not internet explorer

[moww]

I have two <select> boxes on my site, and I'm trying to get java script to decide the options in the second box based on the selection in the first box. The code I have in now works in Firefox, but not Internet Explorer. Anybody know how to get Internet Explorer to support this?

The HTML:



<select size="4" id="wordSelect" name="wordSelect" onchange="showLetters(this.options[this.selectedIndex].value)">
<option value="Rust">Rust</option>
<option value="Bull">Bull</option>
<option value="Nick">Nick</option>
<option value="Smut">Smut</option>
</select>
<select size="4" id="letterSelect" name="letterSelect"></select>


The java script:



<script type="text/javascript">
function showLetters(word) {
if (word == "Rust") {
theHtml = "<option value=\"R\">R</option>"
theHtml+= "<option value=\"u\">u</option>"
theHtml+= "<option value=\"s\">s</option>"
theHtml+= "<option value=\"t\">t</option>"
document.getElementById('letterSelect').innerHTML = theHtml
} else if (word == "Bull") {
theHtml = "<option value=\"B\">B</option>"
theHtml+= "<option value=\"uu\">u</option>"
theHtml+= "<option value=\"l\">l</option>"
theHtml+= "<option value=\"ll\">l</option>"
document.getElementById('letterSelect').innerHTML = theHtml
} else if (word == "Nick") {
theHtml = "<option value=\"N\">N</option>"
theHtml+= "<option value=\"i\">i</option>"
theHtml+= "<option value=\"c\">c</option>"
theHtml+= "<option value=\"k\">k</option>"
document.getElementById('letterSelect').innerHTML = theHtml
} else if (word == "Smut") {
theHtml = "<option value=\"SS\">S</option>"
theHtml+= "<option value=\"m\">m</option>"
theHtml+= "<option value=\"uuu\">u</option>"
theHtml+= "<option value=\"tt\">t</option>"
document.getElementById('letterSelect').innerHTML = theHtml
} else {
document.getElementById('letterSelect').innerHTML = ""
}
}
</script>