I have been working on developing a support ticket creation page for my company. I would like there to be a dropdown that displays a different form based on their selection. I was able to get my code to work in JSfiddle.com but it doesn't work when I use it in IE. Any ideas on what could be causing the dropdown not to show any forms?

<!DOCTYPE html>
<html>
<head>
<title>blank</title>
<meta charset="UTF-8">

<script type="text/javascript">

$('#dropdown').on('change', function() {


var val = $(this).val();

$('#headerimage').hide();

$('#repimage').hide();
$('#welcome').hide();
$('#disclaimer').hide();
$('#addimage').hide();

$('#removeimage').hide();
$('#' + val).show();


});


function addFileInput() {




var d = document.createElement("div");


var file = document.createElement("input");


file.setAttribute("type", "file");


file.setAttribute("name", "attachment"+upload_number);


d.appendChild(file);


document.getElementById("moreUploads").appendChild(d);


upload_number++;



}

</script>

<style>

.hidden {display:none};

</style>

</head>

<body>

<select id="dropdown" name="update_type">
<option>Please Make a Selection</option>
<option value="headerimage">Header Image</option>
<option value="repimage">Sales Rep Image</option>
<option value="welcome">Welcome Text</option>
<option value="disclaimer">Disclaimer</option>
<option value="addimage">Add Image</option>
<option value="removeimage">Remove Image</option>
</select>

<form id="headerimage" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="headerimage">
Add Header Image:
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />

<div id="moreUploads"></div>

<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</div>
</form>

<form id="repimage" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="repimage">
Rep Name:
<input type="text"></input><br />
Add Rep Image:
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />

<div id="moreUploads"></div>

<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</div>
</form>

<form id="welcome" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="welcome">
Welcome Text:
<textarea rows="4"></textarea>
</div>
</form>

<form id="disclaimer" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="disclaimer">
Disclaimer Text:
<textarea rows="4"></textarea>
</div>
</form>

<form id="addimage" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="addimage">
Add Image:
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />

<div id="moreUploads"></div>

<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
<br><br>
Please specify where you would like us to add this image:
<br><br>
<textarea rows="2"></textarea>
</div>
</form>

<form id="removeimage" class="hidden">
<br><br>
Please fill in the following required information.<br><br>
<div class="hide" id="removeimage">
Please specify which image you would like us to remove:
<textarea rows="2"></textarea>
</div>
</form>

</body>
</html>