Pull Down Replaced By Text Field When Selecting Other

Objective:
- when you select other the pull down menu is replaced by the text field.
Currently:
- Gotten it to the level of when you select the other the text field appears.
Question:
- HOw can I modify the code so when I select the other menu option from the pull down menu and it replaced by the text field?

<script type="text/javascript">
function togglefield(val) {
var o = document.getElementById('other');
(val == 'Other')? o.style.display = 'block' : o.style.display = 'none';
}
</script>
and the form:
<form action="" method="post">
<select name="sel" id="sel" onChange="togglefield(this.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="Other">Other</option>
</select>
<input type="text" name="other" id="other" style="display: none;">
</form>